@six-group/ui-library 3.0.0-beta.1.11

package/dist/types/components.d.ts

@@ -0,0 +1,4335 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { EmptyPayload } from "./utils/types";
+import { SixDateFormats } from "./components/six-datepicker/six-date-formats";
+import { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker";
+import { SixMenuItemData } from "./components/six-menu/six-menu";
+import { SixDropdownAsyncFilterPayload, SixDropdownAutoFilterPayload, SixDropdownScrollPayload } from "./components/six-dropdown/six-dropdown";
+import { SixFileListDownloadPayload, SixFileListRemovePayload } from "./components/six-file-list-item/six-file-list-item";
+import { SixFileUploadFailurePayload, SixFileUploadSuccessPayload } from "./components/six-file-upload/six-file-upload";
+import { SixFormChangePayload, SixFormSubmitPayload } from "./components/six-form/six-form";
+import { SixHeaderAppSwitcherSelectPayload, SixHeaderProfileSelectPayload, SixHeaderSearchFieldToggle } from "./components/six-header/six-header";
+import { ItemPickerPaddingDirection, ItemPickerType } from "./components/six-item-picker/types";
+import { SixItemPickerChangePayload } from "./components/six-item-picker/six-item-picker";
+import { SixLanguageSwitcherChangePayload, SixLanguageSwitcherInput } from "./components/six-language-switcher/six-language-switcher";
+import { SixMenuItemData as SixMenuItemData1, SixMenuItemSelectedPayload } from "./components/six-menu/six-menu";
+import { StageType } from "./components/six-stage-indicator/six-stage-indicator";
+import { SixRootCollapsedPayload } from "./components/six-root/six-root";
+import { SixSearchFieldChangePayload } from "./components/six-search-field/six-search-field";
+import { SixSelectChangePayload } from "./components/six-select/six-select";
+import { StageType as StageType1 } from "./components/six-stage-indicator/six-stage-indicator";
+import { SixTabHidePayload, SixTabShowPayload } from "./components/six-tab-group/six-tab-group";
+import { Data, Item, TableCellClickedPayload, TableReadyPayload, TableRowClickedPayload } from "./components/six-table/types";
+import { FilterMode, SortDirection } from "./components/six-table-header-cell/types";
+import { SixTableHeaderCellFilterUpdatedPayload, SixTableHeaderCellSortUpdatedPayload } from "./components/six-table-header-cell/six-table-header-cell";
+import { SixTimeFormat } from "./components/six-timepicker/six-time-format";
+import { SixTimepickerChange } from "./components/six-timepicker/six-timepicker";
+export namespace Components {
+    interface SetAttributes {
+        /**
+          * Attributes map
+         */
+        "value": {};
+    }
+    interface SixAlert {
+        /**
+          * Set to true to make the alert closable.
+         */
+        "closable": boolean;
+        /**
+          * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart.
+         */
+        "duration": number;
+        /**
+          * Hides the alert
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * Shows the alert.
+         */
+        "show": () => Promise<void>;
+        /**
+          * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden.
+         */
+        "toast": () => Promise<void>;
+        /**
+          * The type of alert.
+         */
+        "type": 'primary' | 'success' | 'info' | 'warning' | 'danger';
+    }
+    interface SixAvatar {
+        /**
+          * Alternative text for the image.
+         */
+        "alt": string;
+        /**
+          * The image source to use for the avatar.
+         */
+        "image": string;
+        /**
+          * Initials to use as a fallback when no image is available (1-2 characters max recommended).
+         */
+        "initials": string;
+        /**
+          * The shape of the avatar.
+         */
+        "shape": 'circle' | 'square' | 'rounded';
+    }
+    interface SixBadge {
+        /**
+          * Set to true to draw a pill-style badge with rounded edges.
+         */
+        "pill": boolean;
+        /**
+          * Set to true to make the badge pulsate to draw attention.
+         */
+        "pulse": boolean;
+        /**
+          * The badge's type.
+         */
+        "type": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action';
+    }
+    interface SixButton {
+        /**
+          * Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
+         */
+        "caret": boolean;
+        /**
+          * Set to true to draw a circle button.
+         */
+        "circle": boolean;
+        /**
+          * Set to true to disable the button.
+         */
+        "disabled": boolean;
+        /**
+          * Tells the browser to download the linked file as this filename. Only used when `href` is set.
+         */
+        "download": string;
+        /**
+          * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+         */
+        "href": string;
+        /**
+          * Set to true to draw the button in a loading state.
+         */
+        "loading": boolean;
+        /**
+          * An optional name for the button. Ignored when `href` is set.
+         */
+        "name": string;
+        /**
+          * Set to true to draw a pill-style button with rounded edges.
+         */
+        "pill": boolean;
+        /**
+          * Removes focus from the button.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Indicates if activating the button should reset the form.
+         */
+        "reset": boolean;
+        /**
+          * Sets focus on the button.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * The button's size.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Indicates if activating the button should submit the form. Ignored when `href` is set.
+         */
+        "submit": boolean;
+        /**
+          * Tells the browser where to open the link. Only used when `href` is set.
+         */
+        "target": '_blank' | '_parent' | '_self' | '_top';
+        /**
+          * The button's type.
+         */
+        "type": 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action';
+        /**
+          * An optional value for the button. Ignored when `href` is set.
+         */
+        "value": string;
+    }
+    interface SixCard {
+    }
+    interface SixCheckbox {
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to draw the checkbox in a checked state.
+         */
+        "checked": boolean;
+        /**
+          * Set to true to disable the checkbox.
+         */
+        "disabled": boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur": boolean;
+        /**
+          * The checkbox's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText": string;
+        /**
+          * Set to true to draw the checkbox in an indeterminate state.
+         */
+        "indeterminate": boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+         */
+        "invalid": boolean;
+        /**
+          * The checkbox label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * The checkbox's name attribute.
+         */
+        "name": string;
+        /**
+          * Removes focus from the checkbox.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Set to true to make the checkbox a required field.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Sets focus on the checkbox.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * The checkbox's value attribute.
+         */
+        "value": string;
+    }
+    interface SixDatepicker {
+        /**
+          * Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04'  Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+         */
+        "allowedDates": (date: Date) => boolean;
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable": boolean;
+        /**
+          * Closes the datepicker dropdown after selection
+         */
+        "closeOnSelect": boolean;
+        /**
+          * The dropdown will close when the user interacts outside of this element (e.g. clicking).
+         */
+        "containingElement": HTMLElement;
+        /**
+          * Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd'
+         */
+        "dateFormat": SixDateFormats;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+         */
+        "debounce": number;
+        /**
+          * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
+         */
+        "defaultDate"?: string | null;
+        /**
+          * If `true` the component is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur": boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText": string;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist": boolean;
+        /**
+          * Set the position of the icon
+         */
+        "iconPosition": 'left' | 'right';
+        /**
+          * Indicates whether or not the calendar should be shown as an inline (always open) component
+         */
+        "inline": boolean;
+        /**
+          * The input's label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * The language used to render the weekdays and months.
+         */
+        "locale": 'en' | 'de' | 'fr' | 'it';
+        /**
+          * The maximum datetime allowed. Value must be a date object
+         */
+        "max"?: Date | null;
+        /**
+          * The minimum datetime allowed. Value must be a date object
+         */
+        "min"?: Date | null;
+        /**
+          * The input's name attribute.
+         */
+        "name": string;
+        /**
+          * Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * The placeholder defines what text to be shown on the input element
+         */
+        "placeholder"?: string | null;
+        /**
+          * The enforced placement of the dropdown panel.
+         */
+        "placement": 'top' | 'bottom';
+        /**
+          * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+         */
+        "readonly": boolean;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Selects an option
+         */
+        "select": (datestring: string) => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Datepicker size.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Set the type.
+         */
+        "type": 'date' | 'date-time';
+        /**
+          * The value of the form field, which accepts a date object.
+         */
+        "value"?: Date | null;
+    }
+    interface SixDetails {
+        /**
+          * Set to true to prevent the user from toggling the details.
+         */
+        "disabled": boolean;
+        "hasContent": boolean;
+        /**
+          * Hides the detail body
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Set to true when you want to use six-details inline e.g. in a sidebar
+         */
+        "inline": boolean;
+        /**
+          * Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children
+         */
+        "selectableEmpty": boolean;
+        /**
+          * Shows the detail body
+         */
+        "show": () => Promise<void>;
+        /**
+          * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead.
+         */
+        "summary": string;
+        /**
+          * The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead.
+         */
+        "summaryIcon": string;
+        /**
+          * The icon's size.
+         */
+        "summaryIconSize": | 'inherit'
+    | 'xSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xLarge'
+    | 'xxLarge'
+    | 'xxxLarge';
+    }
+    interface SixDialog {
+        /**
+          * Hides the dialog
+         */
+        "hide": () => Promise<void>;
+        /**
+          * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label": string;
+        /**
+          * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.
+         */
+        "noHeader": boolean;
+        /**
+          * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * Shows the dialog
+         */
+        "show": () => Promise<void>;
+    }
+    interface SixDrawer {
+        /**
+          * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
+         */
+        "contained": boolean;
+        /**
+          * Hides the drawer
+         */
+        "hide": () => Promise<void>;
+        /**
+          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label": string;
+        /**
+          * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
+         */
+        "noHeader": boolean;
+        /**
+          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * The direction from which the drawer will open.
+         */
+        "placement": 'top' | 'right' | 'bottom' | 'left';
+        /**
+          * Shows the drawer
+         */
+        "show": () => Promise<void>;
+    }
+    interface SixDropdown {
+        /**
+          * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+         */
+        "asyncFilter": boolean;
+        /**
+          * By default the search field will be focused when opening a dropdown with filtering enabled.
+         */
+        "autofocusFilter": boolean;
+        /**
+          * Determines whether the dropdown should hide when a menu item is selected.
+         */
+        "closeOnSelect": boolean;
+        /**
+          * The dropdown will close when the user interacts outside of this element (e.g. clicking).
+         */
+        "containingElement": HTMLElement;
+        /**
+          * The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this
+         */
+        "disableHideOnEnterAndSpace": boolean;
+        /**
+          * The distance in pixels from which to offset the panel away from its trigger.
+         */
+        "distance": number;
+        /**
+          * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead
+         */
+        "filter": boolean;
+        /**
+          * The debounce for the filter callbacks.
+         */
+        "filterDebounce": number;
+        /**
+          * The filter's placeholder text.
+         */
+        "filterPlaceholder": string;
+        /**
+          * Hides the dropdown panel
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist": boolean;
+        /**
+          * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+         */
+        "options": SixMenuItemData[] | null;
+        /**
+          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
+         */
+        "placement": | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu is activated.
+         */
+        "reposition": () => Promise<void>;
+        /**
+          * Shows the dropdown panel
+         */
+        "show": () => Promise<void>;
+        /**
+          * The distance in pixels from which to offset the panel along its trigger.
+         */
+        "skidding": number;
+        /**
+          * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+         */
+        "virtualScroll": boolean;
+    }
+    interface SixErrorPage {
+        /**
+          * Defines a custom description.
+         */
+        "customDescription"?: string[];
+        /**
+          * Defines a custom icon.
+         */
+        "customIcon"?: string;
+        /**
+          * Defines a custom title.
+         */
+        "customTitle"?: string;
+        /**
+          * Defines error Code and thus displays the proper error page.
+         */
+        "errorCode": number;
+        /**
+          * Defines language and thus displays the proper error page in the selected language.
+         */
+        "language": 'en' | 'de';
+    }
+    interface SixFileList {
+    }
+    interface SixFileListItem {
+        /**
+          * The date when the file was uploaded
+         */
+        "date": string;
+        /**
+          * An id to clearly identify the file
+         */
+        "identifier": string;
+        /**
+          * The filename
+         */
+        "name": string;
+        /**
+          * Set to true if you don't want to allow to delete this file
+         */
+        "nodelete": boolean;
+        /**
+          * Set to true if you don't want to allow to download this file
+         */
+        "nodownload": boolean;
+        /**
+          * The file size. This number will be divided by 1024 to show the filesize in KB
+         */
+        "size": number;
+    }
+    interface SixFileUpload {
+        /**
+          * Accepted MIME-Types.
+         */
+        "accept": string;
+        /**
+          * Set to true if file control should be small.
+         */
+        "compact": boolean;
+        /**
+          * Set when button is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Label of the drop area.
+         */
+        "label": string;
+        /**
+          * Allowed max file size in bytes.
+         */
+        "maxFileSize": number | undefined;
+    }
+    interface SixFooter {
+    }
+    interface SixForm {
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Gets all form control elements (native and custom).
+         */
+        "getFormControls": () => Promise<HTMLFormElement[]>;
+        /**
+          * Serializes all form controls elements and returns a `FormData` object.
+         */
+        "getFormData": () => Promise<FormData>;
+        /**
+          * Prevent the form from validating inputs before submitting.
+         */
+        "novalidate": boolean;
+        /**
+          * Resets the form and resets the value of all descendants
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Submits the form. If all controls are valid, the `six-form-submit` event will be emitted and the promise will resolve with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.
+         */
+        "submit": () => Promise<boolean>;
+    }
+    interface SixGroupLabel {
+        /**
+          * Set to true to disable the label.
+         */
+        "disabled": boolean;
+        /**
+          * The wrapper label's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText": string;
+        /**
+          * The wrapper label's label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * The label's required attribute.
+         */
+        "required": boolean;
+        /**
+          * The label's size.
+         */
+        "size": 'small' | 'medium' | 'large';
+    }
+    interface SixHeader {
+        /**
+          * Set whether the logo should be clickable
+         */
+        "clickableLogo": boolean;
+        /**
+          * Get open state for search
+         */
+        "getIsSearchOpen": () => Promise<boolean>;
+        /**
+          * Set the hamburger menu icon to open or closed state
+         */
+        "openHamburgerMenu": boolean;
+        /**
+          * Set the header search to be in an open or closed state
+         */
+        "openSearch": boolean;
+        /**
+          * Sets open state for search
+         */
+        "setSearchOpenState": (openState: boolean) => Promise<void>;
+        /**
+          * Indicates if content should be shifted down when search field is visible.
+         */
+        "shiftContent": boolean;
+    }
+    interface SixIcon {
+        /**
+          * If set to true the default material outlined icons are not used.
+         */
+        "filled": boolean;
+        /**
+          * The icon's size.
+         */
+        "size": | 'inherit'
+    | 'xSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xLarge'
+    | 'xxLarge'
+    | 'xxxLarge';
+    }
+    interface SixIconButton {
+        /**
+          * Set to true to disable the button.
+         */
+        "disabled": boolean;
+        /**
+          * HTML symbol code or entity.
+         */
+        "html": string;
+        /**
+          * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does.
+         */
+        "label": string;
+        /**
+          * The name of the icon to draw.
+         */
+        "name": string;
+        /**
+          * The icon's size.
+         */
+        "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+    }
+    interface SixInput {
+        /**
+          * The input's autocaptialize attribute.
+         */
+        "autocapitalize": string;
+        /**
+          * The input's autocomplete attribute.
+         */
+        "autocomplete": string;
+        /**
+          * The input's autocorrect attribute.
+         */
+        "autocorrect": string;
+        /**
+          * The input's autofocus attribute.
+         */
+        "autofocus": boolean;
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable": boolean;
+        /**
+          * Set to true to disable the input.
+         */
+        "disabled": boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur": boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText": string;
+        /**
+          * Returns the native input's validationMessage
+         */
+        "getValidationMessage": () => Promise<string>;
+        /**
+          * Returns the native input's validity
+         */
+        "getValidity": () => Promise<ValidityState>;
+        /**
+          * The input's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText": string;
+        /**
+          * The input's inputmode attribute.
+         */
+        "inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
+         */
+        "invalid": boolean;
+        /**
+          * Returns the native input's validity
+         */
+        "isValid": () => Promise<boolean>;
+        /**
+          * The input's label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * Set to render as line
+         */
+        "line": boolean;
+        /**
+          * The input's maximum value.
+         */
+        "max": number;
+        /**
+          * The maximum length of input that will be considered valid.
+         */
+        "maxlength": number;
+        /**
+          * The input's minimum value.
+         */
+        "min": number;
+        /**
+          * The minimum length of input that will be considered valid.
+         */
+        "minlength": number;
+        /**
+          * The input's name attribute.
+         */
+        "name": string;
+        /**
+          * A pattern to validate input against.
+         */
+        "pattern": string;
+        /**
+          * Set to true to draw a pill-style input with rounded edges.
+         */
+        "pill": boolean;
+        /**
+          * The input's placeholder text.
+         */
+        "placeholder": string;
+        /**
+          * Set to true to make the input readonly.
+         */
+        "readonly": boolean;
+        /**
+          * Removes focus from the input.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Selects all the text in the input.
+         */
+        "select": () => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Sets focus on the input.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Replaces a range of text with a new string.
+         */
+        "setRangeText": (replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>;
+        /**
+          * Sets the start and end positions of the text selection (0-based).
+         */
+        "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>;
+        /**
+          * The input's size.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Enables spell checking on the input.
+         */
+        "spellcheck": boolean;
+        /**
+          * The input's step attribute.
+         */
+        "step": number;
+        /**
+          * Set to true to add a password toggle button for password inputs.
+         */
+        "togglePassword": boolean;
+        /**
+          * The input's type.
+         */
+        "type": 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+        /**
+          * The input's value attribute.
+         */
+        "value": string;
+    }
+    interface SixItemPicker {
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+         */
+        "debounce": number;
+        /**
+          * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+         */
+        "interval": number;
+        /**
+          * Defines a custom list of items you can iterate through
+         */
+        "items": string[];
+        /**
+          * The maximum value allowed to pick.
+         */
+        "max": number | string;
+        /**
+          * The minimum value allowed to pick.
+         */
+        "min": number | string;
+        /**
+          * Defines whether the items should be padded
+         */
+        "padded": boolean;
+        /**
+          * Defines the character used for padding
+         */
+        "paddingChar": string;
+        /**
+          * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default before is selected
+         */
+        "paddingDirection": ItemPickerPaddingDirection;
+        /**
+          * Defines the length of the padded area
+         */
+        "paddingLength": number;
+        /**
+          * Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa.
+         */
+        "roundtrip": boolean;
+        /**
+          * Defines how many steps should be taken when navigating
+         */
+        "step": number;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+         */
+        "timeout": number;
+        /**
+          * The type of items you want to rotate through.
+         */
+        "type": ItemPickerType;
+        /**
+          * The item picker's value attribute.
+         */
+        "value": number | string;
+    }
+    interface SixLanguageSwitcher {
+        /**
+          * The languages which should be selectable options.
+         */
+        "languages": string[] | SixLanguageSwitcherInput[];
+        /**
+          * The language which should be shown as selected
+         */
+        "selected"?: string;
+    }
+    interface SixLayoutGrid {
+        /**
+          * Set the number of grid columns
+         */
+        "columns": any;
+    }
+    interface SixMainContainer {
+        /**
+          * Set to false to remove top and bottom padding.
+         */
+        "padded": boolean;
+    }
+    interface SixMenu {
+        /**
+          * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling
+         */
+        "itemSize": number;
+        /**
+          * Set the options to be shown in the dropdown
+         */
+        "items": SixMenuItemData[] | null;
+        /**
+          * Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown
+         */
+        "itemsShown"?: number;
+        /**
+          * Set to true to remove the box-shadow
+         */
+        "removeBoxShadow": boolean;
+        /**
+          * Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes.
+         */
+        "scrollingDebounce": number;
+        /**
+          * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing. The key passed will be appended to the internal query and the selection will be updated. After a brief period, the internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for enabling type-to-select when the menu doesn't have focus.
+         */
+        "typeToSelect": (key: string) => Promise<void>;
+        /**
+          * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+         */
+        "virtualScroll": boolean;
+    }
+    interface SixMenuDivider {
+    }
+    interface SixMenuItem {
+        /**
+          * Set to true to draw the item in a checked state.
+         */
+        "checked": boolean;
+        /**
+          * Set to true to draw the menu item in a disabled state.
+         */
+        "disabled": boolean;
+        /**
+          * Removes focus from the button.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Sets focus on the button.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * A unique value to store in the menu item. This can be used as a way to identify menu items when selected.
+         */
+        "value": string;
+    }
+    interface SixMenuLabel {
+    }
+    interface SixPicto {
+        /**
+          * Defines the size of the icon.
+         */
+        "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
+    }
+    interface SixProgressBar {
+        /**
+          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+         */
+        "indeterminate": boolean;
+        /**
+          * The progress bar's percentage, 0 to 100.
+         */
+        "percentage": number;
+    }
+    interface SixProgressRing {
+        /**
+          * The current progress percentage, 0 - 100.
+         */
+        "percentage": number;
+        /**
+          * The size of the progress ring in pixels.
+         */
+        "size": number;
+        /**
+          * The stroke width of the progress ring in pixels.
+         */
+        "strokeWidth": number;
+    }
+    interface SixRadio {
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to draw the radio in a checked state.
+         */
+        "checked": boolean;
+        /**
+          * Set to true to disable the radio.
+         */
+        "disabled": boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message provided by the `setCustomValidity` method.
+         */
+        "invalid": boolean;
+        /**
+          * The radio's name attribute.
+         */
+        "name": string;
+        /**
+          * Removes focus from the radio.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Sets focus on the radio.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * The radio's value attribute.
+         */
+        "value": string;
+    }
+    interface SixRange {
+        /**
+          * Set to true to disable the input.
+         */
+        "disabled": boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur": boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText": string;
+        /**
+          * The range's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText": string;
+        /**
+          * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message provided by the `setCustomValidity` method.
+         */
+        "invalid": boolean;
+        /**
+          * The range's label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * The input's max attribute.
+         */
+        "max": number;
+        /**
+          * The input's min attribute.
+         */
+        "min": number;
+        /**
+          * The input's name attribute.
+         */
+        "name": string;
+        /**
+          * Removes focus from the input.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Sets focus on the input.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * The input's step attribute.
+         */
+        "step": number;
+        /**
+          * The preferred placedment of the tooltip.
+         */
+        "tooltip": 'top' | 'bottom' | 'none';
+        /**
+          * A function used to format the tooltip's value.
+         */
+        "tooltipFormatter": (value: number) => string;
+        /**
+          * The input's value attribute.
+         */
+        "value": number;
+    }
+    interface SixRoot {
+        /**
+          * Breakpoint for smaller screens when the right sidebar is collapsed by default.
+         */
+        "breakpoint": number;
+        /**
+          * Defines whether the content section should be padded
+         */
+        "padded": boolean;
+        /**
+          * Defines the stage of the application
+         */
+        "stage": StageType;
+        /**
+          * Defines the version of the application
+         */
+        "version": string;
+    }
+    interface SixSearchField {
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable": boolean;
+        /**
+          * Debounce time in milliseconds, default is 300 ms
+         */
+        "debounce": number;
+        /**
+          * Set to true to disable the input.
+         */
+        "disabled": boolean;
+        /**
+          * The input's placeholder text.
+         */
+        "placeholder": string;
+        /**
+          * The input's value attribute.
+         */
+        "value": string;
+    }
+    interface SixSelect {
+        /**
+          * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+         */
+        "asyncFilter": boolean;
+        /**
+          * Set to true to turn the six-select into an autocomplete.
+         */
+        "autocomplete": boolean;
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to add a clear button when the select is populated.
+         */
+        "clearable": boolean;
+        /**
+          * The default value the select will be reverted to when reset is executed
+         */
+        "defaultValue": string | string[];
+        /**
+          * Set to true to disable the select control.
+         */
+        "disabled": boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur": boolean;
+        /**
+          * The select's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText": string;
+        /**
+          * Set to true to allow filtering for entries in the dropdown
+         */
+        "filter": boolean;
+        /**
+          * The debounce for the filter callbacks.
+         */
+        "filterDebounce": number;
+        /**
+          * The filter's placeholder text.
+         */
+        "filterPlaceholder": string;
+        /**
+          * The select's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText": string;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist": boolean;
+        /**
+          * The debounce for when the input changes for autocompletes should be emitted
+         */
+        "inputDebounce": number;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+         */
+        "invalid": boolean;
+        /**
+          * The select's label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * Set to render as line
+         */
+        "line": boolean;
+        /**
+          * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to -1 to remove the limit.
+         */
+        "maxTagsVisible": number;
+        /**
+          * Set to true to enable multiselect.
+         */
+        "multiple": boolean;
+        /**
+          * The select's name.
+         */
+        "name": string;
+        /**
+          * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+         */
+        "options": SixMenuItemData[] | null;
+        /**
+          * Set to true to draw a pill-style select with rounded edges.
+         */
+        "pill": boolean;
+        /**
+          * The select's placeholder text.
+         */
+        "placeholder": string;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * The select's required attribute.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * The select's size.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The value of the control. This will be a string or an array depending on `multiple`.
+         */
+        "value": string | string[];
+        /**
+          * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+         */
+        "virtualScroll": boolean;
+    }
+    interface SixSidebar {
+        /**
+          * Hides the sidebar
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * Sidebar position
+         */
+        "position": 'left' | 'right';
+        /**
+          * Allows to select a menu item programmatically by index
+         */
+        "selectItemByIndex": (index: number) => Promise<void>;
+        /**
+          * Allows to select a menu item programmatically by name
+         */
+        "selectItemByName": (value: string) => Promise<void>;
+        /**
+          * Shows the sidebar
+         */
+        "show": () => Promise<void>;
+        /**
+          * Toggles whether the sidebar should be shown or hidden
+         */
+        "toggle": () => Promise<void>;
+        /**
+          * Define whether sidebar is toggled meaning only one menu can be open at the same time
+         */
+        "toggled": boolean;
+        /**
+          * Sidebar width
+         */
+        "width": string;
+    }
+    interface SixSidebarItem {
+        /**
+          * Set to true to draw the sidebar item in a disabled state.
+         */
+        "disabled": boolean;
+        /**
+          * Set to true to draw the item in a selected state.
+         */
+        "selected": boolean;
+        /**
+          * A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected.
+         */
+        "value": string;
+    }
+    interface SixSidebarItemGroup {
+        /**
+          * Icon of the group
+         */
+        "icon": string;
+        /**
+          * Title of item group
+         */
+        "name": string;
+        "open": boolean;
+        /**
+          * Custom summary icon name.
+         */
+        "summaryIcon": string;
+        /**
+          * A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected.
+         */
+        "value": string;
+    }
+    interface SixSpinner {
+        /**
+          * Indicates if the spinner is shown as animated SIX logo or simple spinner.
+         */
+        "six": boolean;
+    }
+    interface SixStageIndicator {
+        /**
+          * The indicators value attribute
+         */
+        "stage": StageType;
+    }
+    interface SixSwitch {
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to draw the switch in a checked state.
+         */
+        "checked": boolean;
+        /**
+          * Set to true to disable the switch.
+         */
+        "disabled": boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+         */
+        "invalid": boolean;
+        /**
+          * The switch's name attribute.
+         */
+        "name": string;
+        /**
+          * Removes focus from the switch.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Set to true to make the switch a required field.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Sets focus on the switch.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * The switch's value attribute.
+         */
+        "value": string;
+    }
+    interface SixTab {
+        /**
+          * Set to true to draw the tab in an active state.
+         */
+        "active": boolean;
+        /**
+          * When true, the tab will be rendered with a close icon.
+         */
+        "closable": boolean;
+        /**
+          * Set to true to draw the tab in a disabled state.
+         */
+        "disabled": boolean;
+        /**
+          * The name of the tab panel the tab will control. The panel must be located in the same tab group.
+         */
+        "panel": string;
+        /**
+          * Removes focus from the tab.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Sets focus to the tab.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+    }
+    interface SixTabGroup {
+        /**
+          * Disables the scroll arrows that appear when tabs overflow.
+         */
+        "noScrollControls": boolean;
+        /**
+          * The placement of the tabs.
+         */
+        "placement": 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Shows the specified tab panel.
+         */
+        "show": (panel: string) => Promise<void>;
+    }
+    interface SixTabPanel {
+        /**
+          * When true, the tab panel will be shown.
+         */
+        "active": boolean;
+        /**
+          * The tab panel's name.
+         */
+        "name": string;
+    }
+    interface SixTable {
+        /**
+          * Set to true to display loading indicator.
+         */
+        "loading": boolean;
+        "setData": <T extends Item>(value: Data<T>) => Promise<void>;
+        /**
+          * Set to true to stripe the table.
+         */
+        "striped": boolean;
+    }
+    interface SixTableCell {
+    }
+    interface SixTableHeader {
+    }
+    interface SixTableHeaderCell {
+        /**
+          * Filter mode. Applied only when set.
+         */
+        "filter": FilterMode;
+        /**
+          * Table row property name. Used in the custom events to identify the row.
+         */
+        "name": keyof Item;
+        /**
+          * Sort direction. Applied only when set.
+         */
+        "sort": SortDirection;
+        /**
+          * Filter value. Applied only when filter mode is set.
+         */
+        "value": string;
+    }
+    interface SixTableRow {
+    }
+    interface SixTag {
+        /**
+          * Set to true to make the tag clearable.
+         */
+        "clearable": boolean;
+        /**
+          * Set to true to draw a pill-style tag with rounded edges.
+         */
+        "pill": boolean;
+        /**
+          * The tag's size.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The tag's type.
+         */
+        "type": 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text';
+    }
+    interface SixTextarea {
+        /**
+          * The textarea's autocaptialize attribute.
+         */
+        "autocapitalize": string;
+        /**
+          * The textarea's autocomplete attribute.
+         */
+        "autocomplete": string;
+        /**
+          * The textarea's autocorrect attribute.
+         */
+        "autocorrect": string;
+        /**
+          * The textarea's autofocus attribute.
+         */
+        "autofocus": boolean;
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to disable the textarea.
+         */
+        "disabled": boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur": boolean;
+        /**
+          * The textarea's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText": string;
+        /**
+          * The textarea's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText": string;
+        /**
+          * The textarea's inputmode attribute.
+         */
+        "inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by props such as `required`, `minlength`, and `maxlength` using the browser's constraint validation API.
+         */
+        "invalid": boolean;
+        /**
+          * The textarea's label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * The maximum length of input that will be considered valid.
+         */
+        "maxlength": number;
+        /**
+          * The minimum length of input that will be considered valid.
+         */
+        "minlength": number;
+        /**
+          * The textarea's name attribute.
+         */
+        "name": string;
+        /**
+          * The textarea's placeholder text.
+         */
+        "placeholder": string;
+        /**
+          * Set to true for a readonly textarea.
+         */
+        "readonly": boolean;
+        /**
+          * Removes focus fromt the textarea.
+         */
+        "removeFocus": () => Promise<void>;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * The textarea's required attribute.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Controls how the textarea can be resized.
+         */
+        "resize": 'none' | 'vertical' | 'auto';
+        /**
+          * The number of rows to display by default.
+         */
+        "rows": number;
+        /**
+          * Selects all the text in the input.
+         */
+        "select": () => Promise<void>;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Sets focus on the textarea.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Replaces a range of text with a new string.
+         */
+        "setRangeText": (replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>;
+        /**
+          * Sets the start and end positions of the text selection (0-based).
+         */
+        "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>;
+        /**
+          * The textarea's size.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The textarea's spellcheck attribute.
+         */
+        "spellcheck": boolean;
+        /**
+          * The textarea's value attribute.
+         */
+        "value": string;
+    }
+    interface SixTile {
+        /**
+          * Flag, whether the tile is closeable.
+         */
+        "closeable": boolean;
+        /**
+          * Enables tile tooltip for tiles
+         */
+        "disableTooltip": boolean;
+        /**
+          * Set to true to disable the tile.
+         */
+        "disabled": boolean;
+        /**
+          * Flag, whether the tile should cast a shadow.
+         */
+        "elevated": boolean;
+        /**
+          * Hides the tile
+         */
+        "hide": () => Promise<void>;
+        /**
+          * The icon's name.
+         */
+        "iconName": any;
+        /**
+          * The tile's label.
+         */
+        "label": string;
+        /**
+          * Shows the tile
+         */
+        "show": () => Promise<void>;
+        /**
+          * The tile's size.
+         */
+        "size": 'small' | 'medium' | 'large';
+    }
+    interface SixTimepicker {
+        /**
+          * Checks for validity.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable": boolean;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+         */
+        "debounce": number;
+        /**
+          * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.
+         */
+        "defaultTime"?: string | null;
+        /**
+          * If `true` the component is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur": boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText": string;
+        /**
+          * Define the time format. Valid formats are:  HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms  where HH is the 24 hour format and hh is the 12 hour format  Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm
+         */
+        "format": SixTimeFormat;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist": boolean;
+        /**
+          * Set the position of the icon
+         */
+        "iconPosition": 'left' | 'right';
+        /**
+          * Indicates whether or not the timepicker should be shown as an inline (always open) component
+         */
+        "inline": boolean;
+        /**
+          * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
+         */
+        "interval": number;
+        /**
+          * The input's label. Alternatively, you can use the label slot.
+         */
+        "label": string;
+        /**
+          * The input's name attribute.
+         */
+        "name": string;
+        /**
+          * Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * The placeholder defines what text to be shown on the input element
+         */
+        "placeholder"?: string | null;
+        /**
+          * The enforced placement of the dropdown panel.
+         */
+        "placement": 'top' | 'bottom';
+        /**
+          * If `true` the user can only select a time via the timepicker but not directly edit the input field.
+         */
+        "readonly": boolean;
+        /**
+          * Checks for validity and shows the browser's validation message if the control is invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required": boolean;
+        /**
+          * Resets the formcontrol
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Define the separator to be shown between the time unit pickers. Please be aware that this property will modify the displayed separator only. The separator for a timestring is always expected to be a colon (eg. '13:52:20')
+         */
+        "separator": string;
+        /**
+          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * Timepicker size.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
+         */
+        "timeout": number;
+        /**
+          * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
+         */
+        "value"?: string | null;
+    }
+    interface SixTooltip {
+        /**
+          * The tooltip's content. Alternatively, you can use the content slot.
+         */
+        "content": string;
+        /**
+          * Set to true to disable the tooltip so it won't show when triggered.
+         */
+        "disabled": boolean;
+        /**
+          * The distance in pixels from which to offset the tooltip away from its target.
+         */
+        "distance": number;
+        /**
+          * Shows the tooltip.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
+         */
+        "open": boolean;
+        /**
+          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
+         */
+        "placement": | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * Shows the tooltip.
+         */
+        "show": () => Promise<void>;
+        /**
+          * The distance in pixels from which to offset the tooltip along its target.
+         */
+        "skidding": number;
+        /**
+          * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
+         */
+        "trigger": string;
+    }
+}
+declare global {
+    interface HTMLSetAttributesElement extends Components.SetAttributes, HTMLStencilElement {
+    }
+    var HTMLSetAttributesElement: {
+        prototype: HTMLSetAttributesElement;
+        new (): HTMLSetAttributesElement;
+    };
+    interface HTMLSixAlertElement extends Components.SixAlert, HTMLStencilElement {
+    }
+    var HTMLSixAlertElement: {
+        prototype: HTMLSixAlertElement;
+        new (): HTMLSixAlertElement;
+    };
+    interface HTMLSixAvatarElement extends Components.SixAvatar, HTMLStencilElement {
+    }
+    var HTMLSixAvatarElement: {
+        prototype: HTMLSixAvatarElement;
+        new (): HTMLSixAvatarElement;
+    };
+    interface HTMLSixBadgeElement extends Components.SixBadge, HTMLStencilElement {
+    }
+    var HTMLSixBadgeElement: {
+        prototype: HTMLSixBadgeElement;
+        new (): HTMLSixBadgeElement;
+    };
+    interface HTMLSixButtonElement extends Components.SixButton, HTMLStencilElement {
+    }
+    var HTMLSixButtonElement: {
+        prototype: HTMLSixButtonElement;
+        new (): HTMLSixButtonElement;
+    };
+    interface HTMLSixCardElement extends Components.SixCard, HTMLStencilElement {
+    }
+    var HTMLSixCardElement: {
+        prototype: HTMLSixCardElement;
+        new (): HTMLSixCardElement;
+    };
+    interface HTMLSixCheckboxElement extends Components.SixCheckbox, HTMLStencilElement {
+    }
+    var HTMLSixCheckboxElement: {
+        prototype: HTMLSixCheckboxElement;
+        new (): HTMLSixCheckboxElement;
+    };
+    interface HTMLSixDatepickerElement extends Components.SixDatepicker, HTMLStencilElement {
+    }
+    var HTMLSixDatepickerElement: {
+        prototype: HTMLSixDatepickerElement;
+        new (): HTMLSixDatepickerElement;
+    };
+    interface HTMLSixDetailsElement extends Components.SixDetails, HTMLStencilElement {
+    }
+    var HTMLSixDetailsElement: {
+        prototype: HTMLSixDetailsElement;
+        new (): HTMLSixDetailsElement;
+    };
+    interface HTMLSixDialogElement extends Components.SixDialog, HTMLStencilElement {
+    }
+    var HTMLSixDialogElement: {
+        prototype: HTMLSixDialogElement;
+        new (): HTMLSixDialogElement;
+    };
+    interface HTMLSixDrawerElement extends Components.SixDrawer, HTMLStencilElement {
+    }
+    var HTMLSixDrawerElement: {
+        prototype: HTMLSixDrawerElement;
+        new (): HTMLSixDrawerElement;
+    };
+    interface HTMLSixDropdownElement extends Components.SixDropdown, HTMLStencilElement {
+    }
+    var HTMLSixDropdownElement: {
+        prototype: HTMLSixDropdownElement;
+        new (): HTMLSixDropdownElement;
+    };
+    interface HTMLSixErrorPageElement extends Components.SixErrorPage, HTMLStencilElement {
+    }
+    var HTMLSixErrorPageElement: {
+        prototype: HTMLSixErrorPageElement;
+        new (): HTMLSixErrorPageElement;
+    };
+    interface HTMLSixFileListElement extends Components.SixFileList, HTMLStencilElement {
+    }
+    var HTMLSixFileListElement: {
+        prototype: HTMLSixFileListElement;
+        new (): HTMLSixFileListElement;
+    };
+    interface HTMLSixFileListItemElement extends Components.SixFileListItem, HTMLStencilElement {
+    }
+    var HTMLSixFileListItemElement: {
+        prototype: HTMLSixFileListItemElement;
+        new (): HTMLSixFileListItemElement;
+    };
+    interface HTMLSixFileUploadElement extends Components.SixFileUpload, HTMLStencilElement {
+    }
+    var HTMLSixFileUploadElement: {
+        prototype: HTMLSixFileUploadElement;
+        new (): HTMLSixFileUploadElement;
+    };
+    interface HTMLSixFooterElement extends Components.SixFooter, HTMLStencilElement {
+    }
+    var HTMLSixFooterElement: {
+        prototype: HTMLSixFooterElement;
+        new (): HTMLSixFooterElement;
+    };
+    interface HTMLSixFormElement extends Components.SixForm, HTMLStencilElement {
+    }
+    var HTMLSixFormElement: {
+        prototype: HTMLSixFormElement;
+        new (): HTMLSixFormElement;
+    };
+    interface HTMLSixGroupLabelElement extends Components.SixGroupLabel, HTMLStencilElement {
+    }
+    var HTMLSixGroupLabelElement: {
+        prototype: HTMLSixGroupLabelElement;
+        new (): HTMLSixGroupLabelElement;
+    };
+    interface HTMLSixHeaderElement extends Components.SixHeader, HTMLStencilElement {
+    }
+    var HTMLSixHeaderElement: {
+        prototype: HTMLSixHeaderElement;
+        new (): HTMLSixHeaderElement;
+    };
+    interface HTMLSixIconElement extends Components.SixIcon, HTMLStencilElement {
+    }
+    var HTMLSixIconElement: {
+        prototype: HTMLSixIconElement;
+        new (): HTMLSixIconElement;
+    };
+    interface HTMLSixIconButtonElement extends Components.SixIconButton, HTMLStencilElement {
+    }
+    var HTMLSixIconButtonElement: {
+        prototype: HTMLSixIconButtonElement;
+        new (): HTMLSixIconButtonElement;
+    };
+    interface HTMLSixInputElement extends Components.SixInput, HTMLStencilElement {
+    }
+    var HTMLSixInputElement: {
+        prototype: HTMLSixInputElement;
+        new (): HTMLSixInputElement;
+    };
+    interface HTMLSixItemPickerElement extends Components.SixItemPicker, HTMLStencilElement {
+    }
+    var HTMLSixItemPickerElement: {
+        prototype: HTMLSixItemPickerElement;
+        new (): HTMLSixItemPickerElement;
+    };
+    interface HTMLSixLanguageSwitcherElement extends Components.SixLanguageSwitcher, HTMLStencilElement {
+    }
+    var HTMLSixLanguageSwitcherElement: {
+        prototype: HTMLSixLanguageSwitcherElement;
+        new (): HTMLSixLanguageSwitcherElement;
+    };
+    interface HTMLSixLayoutGridElement extends Components.SixLayoutGrid, HTMLStencilElement {
+    }
+    var HTMLSixLayoutGridElement: {
+        prototype: HTMLSixLayoutGridElement;
+        new (): HTMLSixLayoutGridElement;
+    };
+    interface HTMLSixMainContainerElement extends Components.SixMainContainer, HTMLStencilElement {
+    }
+    var HTMLSixMainContainerElement: {
+        prototype: HTMLSixMainContainerElement;
+        new (): HTMLSixMainContainerElement;
+    };
+    interface HTMLSixMenuElement extends Components.SixMenu, HTMLStencilElement {
+    }
+    var HTMLSixMenuElement: {
+        prototype: HTMLSixMenuElement;
+        new (): HTMLSixMenuElement;
+    };
+    interface HTMLSixMenuDividerElement extends Components.SixMenuDivider, HTMLStencilElement {
+    }
+    var HTMLSixMenuDividerElement: {
+        prototype: HTMLSixMenuDividerElement;
+        new (): HTMLSixMenuDividerElement;
+    };
+    interface HTMLSixMenuItemElement extends Components.SixMenuItem, HTMLStencilElement {
+    }
+    var HTMLSixMenuItemElement: {
+        prototype: HTMLSixMenuItemElement;
+        new (): HTMLSixMenuItemElement;
+    };
+    interface HTMLSixMenuLabelElement extends Components.SixMenuLabel, HTMLStencilElement {
+    }
+    var HTMLSixMenuLabelElement: {
+        prototype: HTMLSixMenuLabelElement;
+        new (): HTMLSixMenuLabelElement;
+    };
+    interface HTMLSixPictoElement extends Components.SixPicto, HTMLStencilElement {
+    }
+    var HTMLSixPictoElement: {
+        prototype: HTMLSixPictoElement;
+        new (): HTMLSixPictoElement;
+    };
+    interface HTMLSixProgressBarElement extends Components.SixProgressBar, HTMLStencilElement {
+    }
+    var HTMLSixProgressBarElement: {
+        prototype: HTMLSixProgressBarElement;
+        new (): HTMLSixProgressBarElement;
+    };
+    interface HTMLSixProgressRingElement extends Components.SixProgressRing, HTMLStencilElement {
+    }
+    var HTMLSixProgressRingElement: {
+        prototype: HTMLSixProgressRingElement;
+        new (): HTMLSixProgressRingElement;
+    };
+    interface HTMLSixRadioElement extends Components.SixRadio, HTMLStencilElement {
+    }
+    var HTMLSixRadioElement: {
+        prototype: HTMLSixRadioElement;
+        new (): HTMLSixRadioElement;
+    };
+    interface HTMLSixRangeElement extends Components.SixRange, HTMLStencilElement {
+    }
+    var HTMLSixRangeElement: {
+        prototype: HTMLSixRangeElement;
+        new (): HTMLSixRangeElement;
+    };
+    interface HTMLSixRootElement extends Components.SixRoot, HTMLStencilElement {
+    }
+    var HTMLSixRootElement: {
+        prototype: HTMLSixRootElement;
+        new (): HTMLSixRootElement;
+    };
+    interface HTMLSixSearchFieldElement extends Components.SixSearchField, HTMLStencilElement {
+    }
+    var HTMLSixSearchFieldElement: {
+        prototype: HTMLSixSearchFieldElement;
+        new (): HTMLSixSearchFieldElement;
+    };
+    interface HTMLSixSelectElement extends Components.SixSelect, HTMLStencilElement {
+    }
+    var HTMLSixSelectElement: {
+        prototype: HTMLSixSelectElement;
+        new (): HTMLSixSelectElement;
+    };
+    interface HTMLSixSidebarElement extends Components.SixSidebar, HTMLStencilElement {
+    }
+    var HTMLSixSidebarElement: {
+        prototype: HTMLSixSidebarElement;
+        new (): HTMLSixSidebarElement;
+    };
+    interface HTMLSixSidebarItemElement extends Components.SixSidebarItem, HTMLStencilElement {
+    }
+    var HTMLSixSidebarItemElement: {
+        prototype: HTMLSixSidebarItemElement;
+        new (): HTMLSixSidebarItemElement;
+    };
+    interface HTMLSixSidebarItemGroupElement extends Components.SixSidebarItemGroup, HTMLStencilElement {
+    }
+    var HTMLSixSidebarItemGroupElement: {
+        prototype: HTMLSixSidebarItemGroupElement;
+        new (): HTMLSixSidebarItemGroupElement;
+    };
+    interface HTMLSixSpinnerElement extends Components.SixSpinner, HTMLStencilElement {
+    }
+    var HTMLSixSpinnerElement: {
+        prototype: HTMLSixSpinnerElement;
+        new (): HTMLSixSpinnerElement;
+    };
+    interface HTMLSixStageIndicatorElement extends Components.SixStageIndicator, HTMLStencilElement {
+    }
+    var HTMLSixStageIndicatorElement: {
+        prototype: HTMLSixStageIndicatorElement;
+        new (): HTMLSixStageIndicatorElement;
+    };
+    interface HTMLSixSwitchElement extends Components.SixSwitch, HTMLStencilElement {
+    }
+    var HTMLSixSwitchElement: {
+        prototype: HTMLSixSwitchElement;
+        new (): HTMLSixSwitchElement;
+    };
+    interface HTMLSixTabElement extends Components.SixTab, HTMLStencilElement {
+    }
+    var HTMLSixTabElement: {
+        prototype: HTMLSixTabElement;
+        new (): HTMLSixTabElement;
+    };
+    interface HTMLSixTabGroupElement extends Components.SixTabGroup, HTMLStencilElement {
+    }
+    var HTMLSixTabGroupElement: {
+        prototype: HTMLSixTabGroupElement;
+        new (): HTMLSixTabGroupElement;
+    };
+    interface HTMLSixTabPanelElement extends Components.SixTabPanel, HTMLStencilElement {
+    }
+    var HTMLSixTabPanelElement: {
+        prototype: HTMLSixTabPanelElement;
+        new (): HTMLSixTabPanelElement;
+    };
+    interface HTMLSixTableElement extends Components.SixTable, HTMLStencilElement {
+    }
+    var HTMLSixTableElement: {
+        prototype: HTMLSixTableElement;
+        new (): HTMLSixTableElement;
+    };
+    interface HTMLSixTableCellElement extends Components.SixTableCell, HTMLStencilElement {
+    }
+    var HTMLSixTableCellElement: {
+        prototype: HTMLSixTableCellElement;
+        new (): HTMLSixTableCellElement;
+    };
+    interface HTMLSixTableHeaderElement extends Components.SixTableHeader, HTMLStencilElement {
+    }
+    var HTMLSixTableHeaderElement: {
+        prototype: HTMLSixTableHeaderElement;
+        new (): HTMLSixTableHeaderElement;
+    };
+    interface HTMLSixTableHeaderCellElement extends Components.SixTableHeaderCell, HTMLStencilElement {
+    }
+    var HTMLSixTableHeaderCellElement: {
+        prototype: HTMLSixTableHeaderCellElement;
+        new (): HTMLSixTableHeaderCellElement;
+    };
+    interface HTMLSixTableRowElement extends Components.SixTableRow, HTMLStencilElement {
+    }
+    var HTMLSixTableRowElement: {
+        prototype: HTMLSixTableRowElement;
+        new (): HTMLSixTableRowElement;
+    };
+    interface HTMLSixTagElement extends Components.SixTag, HTMLStencilElement {
+    }
+    var HTMLSixTagElement: {
+        prototype: HTMLSixTagElement;
+        new (): HTMLSixTagElement;
+    };
+    interface HTMLSixTextareaElement extends Components.SixTextarea, HTMLStencilElement {
+    }
+    var HTMLSixTextareaElement: {
+        prototype: HTMLSixTextareaElement;
+        new (): HTMLSixTextareaElement;
+    };
+    interface HTMLSixTileElement extends Components.SixTile, HTMLStencilElement {
+    }
+    var HTMLSixTileElement: {
+        prototype: HTMLSixTileElement;
+        new (): HTMLSixTileElement;
+    };
+    interface HTMLSixTimepickerElement extends Components.SixTimepicker, HTMLStencilElement {
+    }
+    var HTMLSixTimepickerElement: {
+        prototype: HTMLSixTimepickerElement;
+        new (): HTMLSixTimepickerElement;
+    };
+    interface HTMLSixTooltipElement extends Components.SixTooltip, HTMLStencilElement {
+    }
+    var HTMLSixTooltipElement: {
+        prototype: HTMLSixTooltipElement;
+        new (): HTMLSixTooltipElement;
+    };
+    interface HTMLElementTagNameMap {
+        "set-attributes": HTMLSetAttributesElement;
+        "six-alert": HTMLSixAlertElement;
+        "six-avatar": HTMLSixAvatarElement;
+        "six-badge": HTMLSixBadgeElement;
+        "six-button": HTMLSixButtonElement;
+        "six-card": HTMLSixCardElement;
+        "six-checkbox": HTMLSixCheckboxElement;
+        "six-datepicker": HTMLSixDatepickerElement;
+        "six-details": HTMLSixDetailsElement;
+        "six-dialog": HTMLSixDialogElement;
+        "six-drawer": HTMLSixDrawerElement;
+        "six-dropdown": HTMLSixDropdownElement;
+        "six-error-page": HTMLSixErrorPageElement;
+        "six-file-list": HTMLSixFileListElement;
+        "six-file-list-item": HTMLSixFileListItemElement;
+        "six-file-upload": HTMLSixFileUploadElement;
+        "six-footer": HTMLSixFooterElement;
+        "six-form": HTMLSixFormElement;
+        "six-group-label": HTMLSixGroupLabelElement;
+        "six-header": HTMLSixHeaderElement;
+        "six-icon": HTMLSixIconElement;
+        "six-icon-button": HTMLSixIconButtonElement;
+        "six-input": HTMLSixInputElement;
+        "six-item-picker": HTMLSixItemPickerElement;
+        "six-language-switcher": HTMLSixLanguageSwitcherElement;
+        "six-layout-grid": HTMLSixLayoutGridElement;
+        "six-main-container": HTMLSixMainContainerElement;
+        "six-menu": HTMLSixMenuElement;
+        "six-menu-divider": HTMLSixMenuDividerElement;
+        "six-menu-item": HTMLSixMenuItemElement;
+        "six-menu-label": HTMLSixMenuLabelElement;
+        "six-picto": HTMLSixPictoElement;
+        "six-progress-bar": HTMLSixProgressBarElement;
+        "six-progress-ring": HTMLSixProgressRingElement;
+        "six-radio": HTMLSixRadioElement;
+        "six-range": HTMLSixRangeElement;
+        "six-root": HTMLSixRootElement;
+        "six-search-field": HTMLSixSearchFieldElement;
+        "six-select": HTMLSixSelectElement;
+        "six-sidebar": HTMLSixSidebarElement;
+        "six-sidebar-item": HTMLSixSidebarItemElement;
+        "six-sidebar-item-group": HTMLSixSidebarItemGroupElement;
+        "six-spinner": HTMLSixSpinnerElement;
+        "six-stage-indicator": HTMLSixStageIndicatorElement;
+        "six-switch": HTMLSixSwitchElement;
+        "six-tab": HTMLSixTabElement;
+        "six-tab-group": HTMLSixTabGroupElement;
+        "six-tab-panel": HTMLSixTabPanelElement;
+        "six-table": HTMLSixTableElement;
+        "six-table-cell": HTMLSixTableCellElement;
+        "six-table-header": HTMLSixTableHeaderElement;
+        "six-table-header-cell": HTMLSixTableHeaderCellElement;
+        "six-table-row": HTMLSixTableRowElement;
+        "six-tag": HTMLSixTagElement;
+        "six-textarea": HTMLSixTextareaElement;
+        "six-tile": HTMLSixTileElement;
+        "six-timepicker": HTMLSixTimepickerElement;
+        "six-tooltip": HTMLSixTooltipElement;
+    }
+}
+declare namespace LocalJSX {
+    interface SetAttributes {
+        /**
+          * Attributes map
+         */
+        "value"?: {};
+    }
+    interface SixAlert {
+        /**
+          * Set to true to make the alert closable.
+         */
+        "closable"?: boolean;
+        /**
+          * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart.
+         */
+        "duration"?: number;
+        /**
+          * Emitted after the alert closes and all transitions are complete.
+         */
+        "onSix-alert-after-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted after the alert opens and all transitions are complete.
+         */
+        "onSix-alert-after-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onSix-alert-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onSix-alert-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The type of alert.
+         */
+        "type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger';
+    }
+    interface SixAvatar {
+        /**
+          * Alternative text for the image.
+         */
+        "alt"?: string;
+        /**
+          * The image source to use for the avatar.
+         */
+        "image"?: string;
+        /**
+          * Initials to use as a fallback when no image is available (1-2 characters max recommended).
+         */
+        "initials"?: string;
+        /**
+          * The shape of the avatar.
+         */
+        "shape"?: 'circle' | 'square' | 'rounded';
+    }
+    interface SixBadge {
+        /**
+          * Set to true to draw a pill-style badge with rounded edges.
+         */
+        "pill"?: boolean;
+        /**
+          * Set to true to make the badge pulsate to draw attention.
+         */
+        "pulse"?: boolean;
+        /**
+          * The badge's type.
+         */
+        "type"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action';
+    }
+    interface SixButton {
+        /**
+          * Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
+         */
+        "caret"?: boolean;
+        /**
+          * Set to true to draw a circle button.
+         */
+        "circle"?: boolean;
+        /**
+          * Set to true to disable the button.
+         */
+        "disabled"?: boolean;
+        /**
+          * Tells the browser to download the linked file as this filename. Only used when `href` is set.
+         */
+        "download"?: string;
+        /**
+          * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+         */
+        "href"?: string;
+        /**
+          * Set to true to draw the button in a loading state.
+         */
+        "loading"?: boolean;
+        /**
+          * An optional name for the button. Ignored when `href` is set.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the button loses focus.
+         */
+        "onSix-button-blur"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the button gains focus.
+         */
+        "onSix-button-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Set to true to draw a pill-style button with rounded edges.
+         */
+        "pill"?: boolean;
+        /**
+          * Indicates if activating the button should reset the form.
+         */
+        "reset"?: boolean;
+        /**
+          * The button's size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Indicates if activating the button should submit the form. Ignored when `href` is set.
+         */
+        "submit"?: boolean;
+        /**
+          * Tells the browser where to open the link. Only used when `href` is set.
+         */
+        "target"?: '_blank' | '_parent' | '_self' | '_top';
+        /**
+          * The button's type.
+         */
+        "type"?: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action';
+        /**
+          * An optional value for the button. Ignored when `href` is set.
+         */
+        "value"?: string;
+    }
+    interface SixCard {
+    }
+    interface SixCheckbox {
+        /**
+          * Set to true to draw the checkbox in a checked state.
+         */
+        "checked"?: boolean;
+        /**
+          * Set to true to disable the checkbox.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur"?: boolean;
+        /**
+          * The checkbox's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText"?: string;
+        /**
+          * Set to true to draw the checkbox in an indeterminate state.
+         */
+        "indeterminate"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+         */
+        "invalid"?: boolean;
+        /**
+          * The checkbox label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * The checkbox's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus.
+         */
+        "onSix-checkbox-blur"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control's checked state changes.
+         */
+        "onSix-checkbox-change"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-checkbox-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Set to true to make the checkbox a required field.
+         */
+        "required"?: boolean;
+        /**
+          * The checkbox's value attribute.
+         */
+        "value"?: string;
+    }
+    interface SixDatepicker {
+        /**
+          * Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04'  Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+         */
+        "allowedDates"?: (date: Date) => boolean;
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable"?: boolean;
+        /**
+          * Closes the datepicker dropdown after selection
+         */
+        "closeOnSelect"?: boolean;
+        /**
+          * The dropdown will close when the user interacts outside of this element (e.g. clicking).
+         */
+        "containingElement"?: HTMLElement;
+        /**
+          * Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd'
+         */
+        "dateFormat"?: SixDateFormats;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+         */
+        "debounce"?: number;
+        /**
+          * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
+         */
+        "defaultDate"?: string | null;
+        /**
+          * If `true` the component is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur"?: boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText"?: string;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist"?: boolean;
+        /**
+          * Set the position of the icon
+         */
+        "iconPosition"?: 'left' | 'right';
+        /**
+          * Indicates whether or not the calendar should be shown as an inline (always open) component
+         */
+        "inline"?: boolean;
+        /**
+          * The input's label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * The language used to render the weekdays and months.
+         */
+        "locale"?: 'en' | 'de' | 'fr' | 'it';
+        /**
+          * The maximum datetime allowed. Value must be a date object
+         */
+        "max"?: Date | null;
+        /**
+          * The minimum datetime allowed. Value must be a date object
+         */
+        "min"?: Date | null;
+        /**
+          * The input's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when a option got selected.
+         */
+        "onSix-datepicker-blur"?: (event: CustomEvent<SixDatepickerSelectPayload>) => void;
+        /**
+          * Emitted when the clear button is activated.
+         */
+        "onSix-datepicker-clear"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when a option got selected.
+         */
+        "onSix-datepicker-select"?: (event: CustomEvent<SixDatepickerSelectPayload>) => void;
+        /**
+          * Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The placeholder defines what text to be shown on the input element
+         */
+        "placeholder"?: string | null;
+        /**
+          * The enforced placement of the dropdown panel.
+         */
+        "placement"?: 'top' | 'bottom';
+        /**
+          * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required"?: boolean;
+        /**
+          * Datepicker size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Set the type.
+         */
+        "type"?: 'date' | 'date-time';
+        /**
+          * The value of the form field, which accepts a date object.
+         */
+        "value"?: Date | null;
+    }
+    interface SixDetails {
+        /**
+          * Set to true to prevent the user from toggling the details.
+         */
+        "disabled"?: boolean;
+        "hasContent"?: boolean;
+        /**
+          * Set to true when you want to use six-details inline e.g. in a sidebar
+         */
+        "inline"?: boolean;
+        /**
+          * Emitted after the details closes and all transitions are complete.
+         */
+        "onSix-details-after-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted after the details opens and all transitions are complete.
+         */
+        "onSix-details-after-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onSix-details-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onSix-details-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children
+         */
+        "selectableEmpty"?: boolean;
+        /**
+          * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead.
+         */
+        "summary"?: string;
+        /**
+          * The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead.
+         */
+        "summaryIcon"?: string;
+        /**
+          * The icon's size.
+         */
+        "summaryIconSize"?: | 'inherit'
+    | 'xSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xLarge'
+    | 'xxLarge'
+    | 'xxxLarge';
+    }
+    interface SixDialog {
+        /**
+          * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label"?: string;
+        /**
+          * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.
+         */
+        "noHeader"?: boolean;
+        /**
+          * Emitted after the dialog closes and all transitions are complete.
+         */
+        "onSix-dialog-after-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted after the dialog opens and all transitions are complete.
+         */
+        "onSix-dialog-after-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onSix-dialog-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and allow you to set it on a different element in the dialog, such as an input or button.
+         */
+        "onSix-dialog-initial-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing.
+         */
+        "onSix-dialog-overlay-dismiss"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onSix-dialog-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+    }
+    interface SixDrawer {
+        /**
+          * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
+         */
+        "contained"?: boolean;
+        /**
+          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+         */
+        "label"?: string;
+        /**
+          * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
+         */
+        "noHeader"?: boolean;
+        /**
+          * Emitted after the drawer closes and all transitions are complete.
+         */
+        "onSix-drawer-after-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted after the drawer opens and all transitions are complete.
+         */
+        "onSix-drawer-after-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onSix-drawer-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and allow you to set it on a different element in the drawer, such as an input or button.
+         */
+        "onSix-drawer-initial-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.
+         */
+        "onSix-drawer-overlay-dismiss"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onSix-drawer-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The direction from which the drawer will open.
+         */
+        "placement"?: 'top' | 'right' | 'bottom' | 'left';
+    }
+    interface SixDropdown {
+        /**
+          * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+         */
+        "asyncFilter"?: boolean;
+        /**
+          * By default the search field will be focused when opening a dropdown with filtering enabled.
+         */
+        "autofocusFilter"?: boolean;
+        /**
+          * Determines whether the dropdown should hide when a menu item is selected.
+         */
+        "closeOnSelect"?: boolean;
+        /**
+          * The dropdown will close when the user interacts outside of this element (e.g. clicking).
+         */
+        "containingElement"?: HTMLElement;
+        /**
+          * The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this
+         */
+        "disableHideOnEnterAndSpace"?: boolean;
+        /**
+          * The distance in pixels from which to offset the panel away from its trigger.
+         */
+        "distance"?: number;
+        /**
+          * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead
+         */
+        "filter"?: boolean;
+        /**
+          * The debounce for the filter callbacks.
+         */
+        "filterDebounce"?: number;
+        /**
+          * The filter's placeholder text.
+         */
+        "filterPlaceholder"?: string;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist"?: boolean;
+        /**
+          * Emitted when the async filter is triggered
+         */
+        "onSix-async-filter-fired"?: (event: CustomEvent<SixDropdownAsyncFilterPayload>) => void;
+        /**
+          * Emitted after the dropdown closes and all transitions are complete.
+         */
+        "onSix-dropdown-after-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted after the dropdown opens and all transitions are complete.
+         */
+        "onSix-dropdown-after-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the auto filter is triggered
+         */
+        "onSix-dropdown-auto-filter-fired"?: (event: CustomEvent<SixDropdownAutoFilterPayload>) => void;
+        /**
+          * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onSix-dropdown-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the user scrolls inside dropdown panel.
+         */
+        "onSix-dropdown-scroll"?: (event: CustomEvent<SixDropdownScrollPayload>) => void;
+        /**
+          * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onSix-dropdown-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+         */
+        "options"?: SixMenuItemData[] | null;
+        /**
+          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
+         */
+        "placement"?: | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * The distance in pixels from which to offset the panel along its trigger.
+         */
+        "skidding"?: number;
+        /**
+          * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+         */
+        "virtualScroll"?: boolean;
+    }
+    interface SixErrorPage {
+        /**
+          * Defines a custom description.
+         */
+        "customDescription"?: string[];
+        /**
+          * Defines a custom icon.
+         */
+        "customIcon"?: string;
+        /**
+          * Defines a custom title.
+         */
+        "customTitle"?: string;
+        /**
+          * Defines error Code and thus displays the proper error page.
+         */
+        "errorCode"?: number;
+        /**
+          * Defines language and thus displays the proper error page in the selected language.
+         */
+        "language"?: 'en' | 'de';
+    }
+    interface SixFileList {
+    }
+    interface SixFileListItem {
+        /**
+          * The date when the file was uploaded
+         */
+        "date"?: string;
+        /**
+          * An id to clearly identify the file
+         */
+        "identifier"?: string;
+        /**
+          * The filename
+         */
+        "name"?: string;
+        /**
+          * Set to true if you don't want to allow to delete this file
+         */
+        "nodelete"?: boolean;
+        /**
+          * Set to true if you don't want to allow to download this file
+         */
+        "nodownload"?: boolean;
+        /**
+          * Triggered on file download.
+         */
+        "onSix-file-list-item-download"?: (event: CustomEvent<SixFileListDownloadPayload>) => void;
+        /**
+          * Triggered on file remove.
+         */
+        "onSix-file-list-item-remove"?: (event: CustomEvent<SixFileListRemovePayload>) => void;
+        /**
+          * The file size. This number will be divided by 1024 to show the filesize in KB
+         */
+        "size"?: number;
+    }
+    interface SixFileUpload {
+        /**
+          * Accepted MIME-Types.
+         */
+        "accept"?: string;
+        /**
+          * Set to true if file control should be small.
+         */
+        "compact"?: boolean;
+        /**
+          * Set when button is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Label of the drop area.
+         */
+        "label"?: string;
+        /**
+          * Allowed max file size in bytes.
+         */
+        "maxFileSize"?: number | undefined;
+        /**
+          * Triggers when an uploaded file doesn't match MIME type or max file size.
+         */
+        "onSix-file-upload-failure"?: (event: CustomEvent<SixFileUploadFailurePayload>) => void;
+        /**
+          * Triggers when a file is added.
+         */
+        "onSix-file-upload-success"?: (event: CustomEvent<SixFileUploadSuccessPayload>) => void;
+    }
+    interface SixFooter {
+    }
+    interface SixForm {
+        /**
+          * Prevent the form from validating inputs before submitting.
+         */
+        "novalidate"?: boolean;
+        /**
+          * Emitted when the control's value changes.
+         */
+        "onSix-form-change"?: (event: CustomEvent<SixFormChangePayload>) => void;
+        /**
+          * Emitted when the forms values are reset.
+         */
+        "onSix-form-reset"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form's data with.
+         */
+        "onSix-form-submit"?: (event: CustomEvent<SixFormSubmitPayload>) => void;
+    }
+    interface SixGroupLabel {
+        /**
+          * Set to true to disable the label.
+         */
+        "disabled"?: boolean;
+        /**
+          * The wrapper label's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText"?: string;
+        /**
+          * The wrapper label's label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * The label's required attribute.
+         */
+        "required"?: boolean;
+        /**
+          * The label's size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+    }
+    interface SixHeader {
+        /**
+          * Set whether the logo should be clickable
+         */
+        "clickableLogo"?: boolean;
+        /**
+          * Emitted when the name of the selected app is clicked.
+         */
+        "onSix-header-app-name-clicked"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when a menu item is in the app switcher menu is selected.
+         */
+        "onSix-header-app-switcher-select"?: (event: CustomEvent<SixHeaderAppSwitcherSelectPayload>) => void;
+        /**
+          * Emitted when the hamburger menu is clicked.
+         */
+        "onSix-header-hamburger-menu-clicked"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the header logo is clicked.
+         */
+        "onSix-header-logo-clicked"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when a menu item is in the profile menu is selected.
+         */
+        "onSix-header-profile-select"?: (event: CustomEvent<SixHeaderProfileSelectPayload>) => void;
+        /**
+          * Emitted when search field is toggled.
+         */
+        "onSix-header-search-field-toggle"?: (event: CustomEvent<SixHeaderSearchFieldToggle>) => void;
+        /**
+          * Set the hamburger menu icon to open or closed state
+         */
+        "openHamburgerMenu"?: boolean;
+        /**
+          * Set the header search to be in an open or closed state
+         */
+        "openSearch"?: boolean;
+        /**
+          * Indicates if content should be shifted down when search field is visible.
+         */
+        "shiftContent"?: boolean;
+    }
+    interface SixIcon {
+        /**
+          * If set to true the default material outlined icons are not used.
+         */
+        "filled"?: boolean;
+        /**
+          * The icon's size.
+         */
+        "size"?: | 'inherit'
+    | 'xSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xLarge'
+    | 'xxLarge'
+    | 'xxxLarge';
+    }
+    interface SixIconButton {
+        /**
+          * Set to true to disable the button.
+         */
+        "disabled"?: boolean;
+        /**
+          * HTML symbol code or entity.
+         */
+        "html"?: string;
+        /**
+          * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does.
+         */
+        "label"?: string;
+        /**
+          * The name of the icon to draw.
+         */
+        "name"?: string;
+        /**
+          * The icon's size.
+         */
+        "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+    }
+    interface SixInput {
+        /**
+          * The input's autocaptialize attribute.
+         */
+        "autocapitalize"?: string;
+        /**
+          * The input's autocomplete attribute.
+         */
+        "autocomplete"?: string;
+        /**
+          * The input's autocorrect attribute.
+         */
+        "autocorrect"?: string;
+        /**
+          * The input's autofocus attribute.
+         */
+        "autofocus"?: boolean;
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable"?: boolean;
+        /**
+          * Set to true to disable the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur"?: boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText"?: string;
+        /**
+          * The input's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText"?: string;
+        /**
+          * The input's inputmode attribute.
+         */
+        "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
+         */
+        "invalid"?: boolean;
+        /**
+          * The input's label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * Set to render as line
+         */
+        "line"?: boolean;
+        /**
+          * The input's maximum value.
+         */
+        "max"?: number;
+        /**
+          * The maximum length of input that will be considered valid.
+         */
+        "maxlength"?: number;
+        /**
+          * The input's minimum value.
+         */
+        "min"?: number;
+        /**
+          * The minimum length of input that will be considered valid.
+         */
+        "minlength"?: number;
+        /**
+          * The input's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus. Access the new value via event.target.value.
+         */
+        "onSix-input-blur"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control's value changes. Access the new value via event.target.value.
+         */
+        "onSix-input-change"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the clear button is activated.
+         */
+        "onSix-input-clear"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-input-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control receives input. Access the new value via event.target.value.
+         */
+        "onSix-input-input"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted whenever the value changes. Access the new value via event.target.value. six-input-value-change will emit whenever the value changes. So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data, but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter or leaves the input field after entering some data.
+         */
+        "onSix-input-value-change"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * A pattern to validate input against.
+         */
+        "pattern"?: string;
+        /**
+          * Set to true to draw a pill-style input with rounded edges.
+         */
+        "pill"?: boolean;
+        /**
+          * The input's placeholder text.
+         */
+        "placeholder"?: string;
+        /**
+          * Set to true to make the input readonly.
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required"?: boolean;
+        /**
+          * The input's size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Enables spell checking on the input.
+         */
+        "spellcheck"?: boolean;
+        /**
+          * The input's step attribute.
+         */
+        "step"?: number;
+        /**
+          * Set to true to add a password toggle button for password inputs.
+         */
+        "togglePassword"?: boolean;
+        /**
+          * The input's type.
+         */
+        "type"?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+        /**
+          * The input's value attribute.
+         */
+        "value"?: string;
+    }
+    interface SixItemPicker {
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+         */
+        "debounce"?: number;
+        /**
+          * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+         */
+        "interval"?: number;
+        /**
+          * Defines a custom list of items you can iterate through
+         */
+        "items"?: string[];
+        /**
+          * The maximum value allowed to pick.
+         */
+        "max"?: number | string;
+        /**
+          * The minimum value allowed to pick.
+         */
+        "min"?: number | string;
+        /**
+          * Emitted when the item picker's value changes
+         */
+        "onSix-item-picker-change"?: (event: CustomEvent<SixItemPickerChangePayload>) => void;
+        /**
+          * Emitted when the item picker's value changes, but debounced
+         */
+        "onSix-item-picker-change-debounced"?: (event: CustomEvent<SixItemPickerChangePayload>) => void;
+        /**
+          * Defines whether the items should be padded
+         */
+        "padded"?: boolean;
+        /**
+          * Defines the character used for padding
+         */
+        "paddingChar"?: string;
+        /**
+          * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default before is selected
+         */
+        "paddingDirection"?: ItemPickerPaddingDirection;
+        /**
+          * Defines the length of the padded area
+         */
+        "paddingLength"?: number;
+        /**
+          * Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa.
+         */
+        "roundtrip"?: boolean;
+        /**
+          * Defines how many steps should be taken when navigating
+         */
+        "step"?: number;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+         */
+        "timeout"?: number;
+        /**
+          * The type of items you want to rotate through.
+         */
+        "type"?: ItemPickerType;
+        /**
+          * The item picker's value attribute.
+         */
+        "value"?: number | string;
+    }
+    interface SixLanguageSwitcher {
+        /**
+          * The languages which should be selectable options.
+         */
+        "languages"?: string[] | SixLanguageSwitcherInput[];
+        /**
+          * Emitted when the language switchers value changes
+         */
+        "onSix-language-switcher-change"?: (event: CustomEvent<SixLanguageSwitcherChangePayload>) => void;
+        /**
+          * The language which should be shown as selected
+         */
+        "selected"?: string;
+    }
+    interface SixLayoutGrid {
+        /**
+          * Set the number of grid columns
+         */
+        "columns"?: any;
+    }
+    interface SixMainContainer {
+        /**
+          * Set to false to remove top and bottom padding.
+         */
+        "padded"?: boolean;
+    }
+    interface SixMenu {
+        /**
+          * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling
+         */
+        "itemSize"?: number;
+        /**
+          * Set the options to be shown in the dropdown
+         */
+        "items"?: SixMenuItemData[] | null;
+        /**
+          * Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown
+         */
+        "itemsShown"?: number;
+        /**
+          * Emitted when a menu item is selected.
+         */
+        "onSix-menu-item-selected"?: (event: CustomEvent<SixMenuItemSelectedPayload>) => void;
+        /**
+          * Set to true to remove the box-shadow
+         */
+        "removeBoxShadow"?: boolean;
+        /**
+          * Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes.
+         */
+        "scrollingDebounce"?: number;
+        /**
+          * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+         */
+        "virtualScroll"?: boolean;
+    }
+    interface SixMenuDivider {
+    }
+    interface SixMenuItem {
+        /**
+          * Set to true to draw the item in a checked state.
+         */
+        "checked"?: boolean;
+        /**
+          * Set to true to draw the menu item in a disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * A unique value to store in the menu item. This can be used as a way to identify menu items when selected.
+         */
+        "value"?: string;
+    }
+    interface SixMenuLabel {
+    }
+    interface SixPicto {
+        /**
+          * Defines the size of the icon.
+         */
+        "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
+    }
+    interface SixProgressBar {
+        /**
+          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+         */
+        "indeterminate"?: boolean;
+        /**
+          * The progress bar's percentage, 0 to 100.
+         */
+        "percentage"?: number;
+    }
+    interface SixProgressRing {
+        /**
+          * The current progress percentage, 0 - 100.
+         */
+        "percentage"?: number;
+        /**
+          * The size of the progress ring in pixels.
+         */
+        "size"?: number;
+        /**
+          * The stroke width of the progress ring in pixels.
+         */
+        "strokeWidth"?: number;
+    }
+    interface SixRadio {
+        /**
+          * Set to true to draw the radio in a checked state.
+         */
+        "checked"?: boolean;
+        /**
+          * Set to true to disable the radio.
+         */
+        "disabled"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message provided by the `setCustomValidity` method.
+         */
+        "invalid"?: boolean;
+        /**
+          * The radio's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus.
+         */
+        "onSix-radio-blur"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control's checked state changes.
+         */
+        "onSix-radio-change"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-radio-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * The radio's value attribute.
+         */
+        "value"?: string;
+    }
+    interface SixRange {
+        /**
+          * Set to true to disable the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur"?: boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText"?: string;
+        /**
+          * The range's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText"?: string;
+        /**
+          * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message provided by the `setCustomValidity` method.
+         */
+        "invalid"?: boolean;
+        /**
+          * The range's label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * The input's max attribute.
+         */
+        "max"?: number;
+        /**
+          * The input's min attribute.
+         */
+        "min"?: number;
+        /**
+          * The input's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus.
+         */
+        "onSix-range-blur"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control's value changes.
+         */
+        "onSix-range-change"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-range-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required"?: boolean;
+        /**
+          * The input's step attribute.
+         */
+        "step"?: number;
+        /**
+          * The preferred placedment of the tooltip.
+         */
+        "tooltip"?: 'top' | 'bottom' | 'none';
+        /**
+          * A function used to format the tooltip's value.
+         */
+        "tooltipFormatter"?: (value: number) => string;
+        /**
+          * The input's value attribute.
+         */
+        "value"?: number;
+    }
+    interface SixRoot {
+        /**
+          * Breakpoint for smaller screens when the right sidebar is collapsed by default.
+         */
+        "breakpoint"?: number;
+        /**
+          * Emitted when display size is updated.
+         */
+        "onSix-root-collapsed"?: (event: CustomEvent<SixRootCollapsedPayload>) => void;
+        /**
+          * Defines whether the content section should be padded
+         */
+        "padded"?: boolean;
+        /**
+          * Defines the stage of the application
+         */
+        "stage"?: StageType;
+        /**
+          * Defines the version of the application
+         */
+        "version"?: string;
+    }
+    interface SixSearchField {
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable"?: boolean;
+        /**
+          * Debounce time in milliseconds, default is 300 ms
+         */
+        "debounce"?: number;
+        /**
+          * Set to true to disable the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when a search is triggered
+         */
+        "onSix-search-field-change"?: (event: CustomEvent<SixSearchFieldChangePayload>) => void;
+        /**
+          * The input's placeholder text.
+         */
+        "placeholder"?: string;
+        /**
+          * The input's value attribute.
+         */
+        "value"?: string;
+    }
+    interface SixSelect {
+        /**
+          * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+         */
+        "asyncFilter"?: boolean;
+        /**
+          * Set to true to turn the six-select into an autocomplete.
+         */
+        "autocomplete"?: boolean;
+        /**
+          * Set to true to add a clear button when the select is populated.
+         */
+        "clearable"?: boolean;
+        /**
+          * The default value the select will be reverted to when reset is executed
+         */
+        "defaultValue"?: string | string[];
+        /**
+          * Set to true to disable the select control.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur"?: boolean;
+        /**
+          * The select's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText"?: string;
+        /**
+          * Set to true to allow filtering for entries in the dropdown
+         */
+        "filter"?: boolean;
+        /**
+          * The debounce for the filter callbacks.
+         */
+        "filterDebounce"?: number;
+        /**
+          * The filter's placeholder text.
+         */
+        "filterPlaceholder"?: string;
+        /**
+          * The select's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText"?: string;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist"?: boolean;
+        /**
+          * The debounce for when the input changes for autocompletes should be emitted
+         */
+        "inputDebounce"?: number;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+         */
+        "invalid"?: boolean;
+        /**
+          * The select's label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * Set to render as line
+         */
+        "line"?: boolean;
+        /**
+          * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to -1 to remove the limit.
+         */
+        "maxTagsVisible"?: number;
+        /**
+          * Set to true to enable multiselect.
+         */
+        "multiple"?: boolean;
+        /**
+          * The select's name.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus.
+         */
+        "onSix-select-blur"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control's value changes.
+         */
+        "onSix-select-change"?: (event: CustomEvent<SixSelectChangePayload>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-select-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+         */
+        "options"?: SixMenuItemData[] | null;
+        /**
+          * Set to true to draw a pill-style select with rounded edges.
+         */
+        "pill"?: boolean;
+        /**
+          * The select's placeholder text.
+         */
+        "placeholder"?: string;
+        /**
+          * The select's required attribute.
+         */
+        "required"?: boolean;
+        /**
+          * The select's size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The value of the control. This will be a string or an array depending on `multiple`.
+         */
+        "value"?: string | string[];
+        /**
+          * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+         */
+        "virtualScroll"?: boolean;
+    }
+    interface SixSidebar {
+        /**
+          * Emitted after the sidebar closes and all transitions are complete.
+         */
+        "onSix-sidebar-after-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted after the sidebar opens and all transitions are complete.
+         */
+        "onSix-sidebar-after-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed.
+         */
+        "onSix-sidebar-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and allow you to set it on a different element in the sidebar, such as an input or button.
+         */
+        "onSix-sidebar-initial-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened.
+         */
+        "onSix-sidebar-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * Sidebar position
+         */
+        "position"?: 'left' | 'right';
+        /**
+          * Define whether sidebar is toggled meaning only one menu can be open at the same time
+         */
+        "toggled"?: boolean;
+        /**
+          * Sidebar width
+         */
+        "width"?: string;
+    }
+    interface SixSidebarItem {
+        /**
+          * Set to true to draw the sidebar item in a disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to true to draw the item in a selected state.
+         */
+        "selected"?: boolean;
+        /**
+          * A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected.
+         */
+        "value"?: string;
+    }
+    interface SixSidebarItemGroup {
+        /**
+          * Icon of the group
+         */
+        "icon"?: string;
+        /**
+          * Title of item group
+         */
+        "name"?: string;
+        "open"?: boolean;
+        /**
+          * Custom summary icon name.
+         */
+        "summaryIcon"?: string;
+        /**
+          * A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected.
+         */
+        "value"?: string;
+    }
+    interface SixSpinner {
+        /**
+          * Indicates if the spinner is shown as animated SIX logo or simple spinner.
+         */
+        "six"?: boolean;
+    }
+    interface SixStageIndicator {
+        /**
+          * The indicators value attribute
+         */
+        "stage"?: StageType;
+    }
+    interface SixSwitch {
+        /**
+          * Set to true to draw the switch in a checked state.
+         */
+        "checked"?: boolean;
+        /**
+          * Set to true to disable the switch.
+         */
+        "disabled"?: boolean;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+         */
+        "invalid"?: boolean;
+        /**
+          * The switch's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus.
+         */
+        "onSix-switch-blur"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emitted when the control's checked state changes.
+         */
+        "onSix-switch-change"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-switch-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Set to true to make the switch a required field.
+         */
+        "required"?: boolean;
+        /**
+          * The switch's value attribute.
+         */
+        "value"?: string;
+    }
+    interface SixTab {
+        /**
+          * Set to true to draw the tab in an active state.
+         */
+        "active"?: boolean;
+        /**
+          * When true, the tab will be rendered with a close icon.
+         */
+        "closable"?: boolean;
+        /**
+          * Set to true to draw the tab in a disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the tab is closable and the close button is activated.
+         */
+        "onSix-tab-close"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * The name of the tab panel the tab will control. The panel must be located in the same tab group.
+         */
+        "panel"?: string;
+    }
+    interface SixTabGroup {
+        /**
+          * Disables the scroll arrows that appear when tabs overflow.
+         */
+        "noScrollControls"?: boolean;
+        /**
+          * Emitted when a tab is hidden.
+         */
+        "onSix-tab-hide"?: (event: CustomEvent<SixTabHidePayload>) => void;
+        /**
+          * Emitted when a tab is shown.
+         */
+        "onSix-tab-show"?: (event: CustomEvent<SixTabShowPayload>) => void;
+        /**
+          * The placement of the tabs.
+         */
+        "placement"?: 'top' | 'bottom' | 'left' | 'right';
+    }
+    interface SixTabPanel {
+        /**
+          * When true, the tab panel will be shown.
+         */
+        "active"?: boolean;
+        /**
+          * The tab panel's name.
+         */
+        "name"?: string;
+    }
+    interface SixTable {
+        /**
+          * Set to true to display loading indicator.
+         */
+        "loading"?: boolean;
+        /**
+          * Emitted when table cell is clicked.
+         */
+        "onSix-table-cell-clicked"?: (event: CustomEvent<TableCellClickedPayload<Item>>) => void;
+        /**
+          * Emitted when table is ready.
+         */
+        "onSix-table-ready"?: (event: CustomEvent<TableReadyPayload>) => void;
+        /**
+          * Emitted when table row is clicked.
+         */
+        "onSix-table-row-clicked"?: (event: CustomEvent<TableRowClickedPayload<Item>>) => void;
+        /**
+          * Set to true to stripe the table.
+         */
+        "striped"?: boolean;
+    }
+    interface SixTableCell {
+    }
+    interface SixTableHeader {
+    }
+    interface SixTableHeaderCell {
+        /**
+          * Filter mode. Applied only when set.
+         */
+        "filter"?: FilterMode;
+        /**
+          * Table row property name. Used in the custom events to identify the row.
+         */
+        "name"?: keyof Item;
+        /**
+          * Emitted when filter model is updated.
+         */
+        "onSix-table-header-cell-filter-updated"?: (event: CustomEvent<SixTableHeaderCellFilterUpdatedPayload>) => void;
+        /**
+          * Emitted when sort model is updated.
+         */
+        "onSix-table-header-cell-sort-updated"?: (event: CustomEvent<SixTableHeaderCellSortUpdatedPayload>) => void;
+        /**
+          * Sort direction. Applied only when set.
+         */
+        "sort"?: SortDirection;
+        /**
+          * Filter value. Applied only when filter mode is set.
+         */
+        "value"?: string;
+    }
+    interface SixTableRow {
+    }
+    interface SixTag {
+        /**
+          * Set to true to make the tag clearable.
+         */
+        "clearable"?: boolean;
+        /**
+          * Emitted when the clear button is activated.
+         */
+        "onSix-tag-clear"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Set to true to draw a pill-style tag with rounded edges.
+         */
+        "pill"?: boolean;
+        /**
+          * The tag's size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The tag's type.
+         */
+        "type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text';
+    }
+    interface SixTextarea {
+        /**
+          * The textarea's autocaptialize attribute.
+         */
+        "autocapitalize"?: string;
+        /**
+          * The textarea's autocomplete attribute.
+         */
+        "autocomplete"?: string;
+        /**
+          * The textarea's autocorrect attribute.
+         */
+        "autocorrect"?: string;
+        /**
+          * The textarea's autofocus attribute.
+         */
+        "autofocus"?: boolean;
+        /**
+          * Set to true to disable the textarea.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur"?: boolean;
+        /**
+          * The textarea's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText"?: string;
+        /**
+          * The textarea's help text. Alternatively, you can use the help-text slot.
+         */
+        "helpText"?: string;
+        /**
+          * The textarea's inputmode attribute.
+         */
+        "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by props such as `required`, `minlength`, and `maxlength` using the browser's constraint validation API.
+         */
+        "invalid"?: boolean;
+        /**
+          * The textarea's label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * The maximum length of input that will be considered valid.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum length of input that will be considered valid.
+         */
+        "minlength"?: number;
+        /**
+          * The textarea's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus. Access the new value via event.target.value.
+         */
+        "onSix-textarea-blur"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control's value changes. Access the new value via event.target.value.
+         */
+        "onSix-textarea-change"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-textarea-focus"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the control receives input. Access the new value via event.target.value.
+         */
+        "onSix-textarea-input"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted whenever the value changes. Access the new value via event.target.value. six-textarea-value-change will emit whenever the value changes. So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data, but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter or leaves the textarea field after entering some data.
+         */
+        "onSix-textarea-value-change"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * The textarea's placeholder text.
+         */
+        "placeholder"?: string;
+        /**
+          * Set to true for a readonly textarea.
+         */
+        "readonly"?: boolean;
+        /**
+          * The textarea's required attribute.
+         */
+        "required"?: boolean;
+        /**
+          * Controls how the textarea can be resized.
+         */
+        "resize"?: 'none' | 'vertical' | 'auto';
+        /**
+          * The number of rows to display by default.
+         */
+        "rows"?: number;
+        /**
+          * The textarea's size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The textarea's spellcheck attribute.
+         */
+        "spellcheck"?: boolean;
+        /**
+          * The textarea's value attribute.
+         */
+        "value"?: string;
+    }
+    interface SixTile {
+        /**
+          * Flag, whether the tile is closeable.
+         */
+        "closeable"?: boolean;
+        /**
+          * Enables tile tooltip for tiles
+         */
+        "disableTooltip"?: boolean;
+        /**
+          * Set to true to disable the tile.
+         */
+        "disabled"?: boolean;
+        /**
+          * Flag, whether the tile should cast a shadow.
+         */
+        "elevated"?: boolean;
+        /**
+          * The icon's name.
+         */
+        "iconName"?: any;
+        /**
+          * The tile's label.
+         */
+        "label"?: string;
+        /**
+          * Emitted when the tile was closed.
+         */
+        "onSix-tile-closed"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the tile is selected.
+         */
+        "onSix-tile-selected"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * The tile's size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+    }
+    interface SixTimepicker {
+        /**
+          * Set to true to add a clear button when the input is populated.
+         */
+        "clearable"?: boolean;
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+         */
+        "debounce"?: number;
+        /**
+          * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.
+         */
+        "defaultTime"?: string | null;
+        /**
+          * If `true` the component is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to display the error text on blur and not when typing
+         */
+        "errorOnBlur"?: boolean;
+        /**
+          * The input's error text. Alternatively, you can use the error-text slot.
+         */
+        "errorText"?: string;
+        /**
+          * Define the time format. Valid formats are:  HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms  where HH is the 24 hour format and hh is the 12 hour format  Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm
+         */
+        "format"?: SixTimeFormat;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist"?: boolean;
+        /**
+          * Set the position of the icon
+         */
+        "iconPosition"?: 'left' | 'right';
+        /**
+          * Indicates whether or not the timepicker should be shown as an inline (always open) component
+         */
+        "inline"?: boolean;
+        /**
+          * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
+         */
+        "interval"?: number;
+        /**
+          * The input's label. Alternatively, you can use the label slot.
+         */
+        "label"?: string;
+        /**
+          * The input's name attribute.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the timepicker's value changes
+         */
+        "onSix-timepicker-change"?: (event: CustomEvent<SixTimepickerChange>) => void;
+        /**
+          * Emitted when the timepicker's value changes, but debounced
+         */
+        "onSix-timepicker-change-debounced"?: (event: CustomEvent<SixTimepickerChange>) => void;
+        /**
+          * Emitted when the clear button is activated.
+         */
+        "onSix-timepicker-clear"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The placeholder defines what text to be shown on the input element
+         */
+        "placeholder"?: string | null;
+        /**
+          * The enforced placement of the dropdown panel.
+         */
+        "placement"?: 'top' | 'bottom';
+        /**
+          * If `true` the user can only select a time via the timepicker but not directly edit the input field.
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to true to make the input a required field.
+         */
+        "required"?: boolean;
+        /**
+          * Define the separator to be shown between the time unit pickers. Please be aware that this property will modify the displayed separator only. The separator for a timestring is always expected to be a colon (eg. '13:52:20')
+         */
+        "separator"?: string;
+        /**
+          * Timepicker size.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
+         */
+        "timeout"?: number;
+        /**
+          * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
+         */
+        "value"?: string | null;
+    }
+    interface SixTooltip {
+        /**
+          * The tooltip's content. Alternatively, you can use the content slot.
+         */
+        "content"?: string;
+        /**
+          * Set to true to disable the tooltip so it won't show when triggered.
+         */
+        "disabled"?: boolean;
+        /**
+          * The distance in pixels from which to offset the tooltip away from its target.
+         */
+        "distance"?: number;
+        /**
+          * Emitted after the tooltip has hidden and all transitions are complete.
+         */
+        "onSix-tooltip-after-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted after the tooltip has shown and all transitions are complete.
+         */
+        "onSix-tooltip-after-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden.
+         */
+        "onSix-tooltip-hide"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown.
+         */
+        "onSix-tooltip-show"?: (event: CustomEvent<EmptyPayload>) => void;
+        /**
+          * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
+         */
+        "open"?: boolean;
+        /**
+          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
+         */
+        "placement"?: | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+        /**
+          * The distance in pixels from which to offset the tooltip along its target.
+         */
+        "skidding"?: number;
+        /**
+          * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
+         */
+        "trigger"?: string;
+    }
+    interface IntrinsicElements {
+        "set-attributes": SetAttributes;
+        "six-alert": SixAlert;
+        "six-avatar": SixAvatar;
+        "six-badge": SixBadge;
+        "six-button": SixButton;
+        "six-card": SixCard;
+        "six-checkbox": SixCheckbox;
+        "six-datepicker": SixDatepicker;
+        "six-details": SixDetails;
+        "six-dialog": SixDialog;
+        "six-drawer": SixDrawer;
+        "six-dropdown": SixDropdown;
+        "six-error-page": SixErrorPage;
+        "six-file-list": SixFileList;
+        "six-file-list-item": SixFileListItem;
+        "six-file-upload": SixFileUpload;
+        "six-footer": SixFooter;
+        "six-form": SixForm;
+        "six-group-label": SixGroupLabel;
+        "six-header": SixHeader;
+        "six-icon": SixIcon;
+        "six-icon-button": SixIconButton;
+        "six-input": SixInput;
+        "six-item-picker": SixItemPicker;
+        "six-language-switcher": SixLanguageSwitcher;
+        "six-layout-grid": SixLayoutGrid;
+        "six-main-container": SixMainContainer;
+        "six-menu": SixMenu;
+        "six-menu-divider": SixMenuDivider;
+        "six-menu-item": SixMenuItem;
+        "six-menu-label": SixMenuLabel;
+        "six-picto": SixPicto;
+        "six-progress-bar": SixProgressBar;
+        "six-progress-ring": SixProgressRing;
+        "six-radio": SixRadio;
+        "six-range": SixRange;
+        "six-root": SixRoot;
+        "six-search-field": SixSearchField;
+        "six-select": SixSelect;
+        "six-sidebar": SixSidebar;
+        "six-sidebar-item": SixSidebarItem;
+        "six-sidebar-item-group": SixSidebarItemGroup;
+        "six-spinner": SixSpinner;
+        "six-stage-indicator": SixStageIndicator;
+        "six-switch": SixSwitch;
+        "six-tab": SixTab;
+        "six-tab-group": SixTabGroup;
+        "six-tab-panel": SixTabPanel;
+        "six-table": SixTable;
+        "six-table-cell": SixTableCell;
+        "six-table-header": SixTableHeader;
+        "six-table-header-cell": SixTableHeaderCell;
+        "six-table-row": SixTableRow;
+        "six-tag": SixTag;
+        "six-textarea": SixTextarea;
+        "six-tile": SixTile;
+        "six-timepicker": SixTimepicker;
+        "six-tooltip": SixTooltip;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "set-attributes": LocalJSX.SetAttributes & JSXBase.HTMLAttributes<HTMLSetAttributesElement>;
+            "six-alert": LocalJSX.SixAlert & JSXBase.HTMLAttributes<HTMLSixAlertElement>;
+            "six-avatar": LocalJSX.SixAvatar & JSXBase.HTMLAttributes<HTMLSixAvatarElement>;
+            "six-badge": LocalJSX.SixBadge & JSXBase.HTMLAttributes<HTMLSixBadgeElement>;
+            "six-button": LocalJSX.SixButton & JSXBase.HTMLAttributes<HTMLSixButtonElement>;
+            "six-card": LocalJSX.SixCard & JSXBase.HTMLAttributes<HTMLSixCardElement>;
+            "six-checkbox": LocalJSX.SixCheckbox & JSXBase.HTMLAttributes<HTMLSixCheckboxElement>;
+            "six-datepicker": LocalJSX.SixDatepicker & JSXBase.HTMLAttributes<HTMLSixDatepickerElement>;
+            "six-details": LocalJSX.SixDetails & JSXBase.HTMLAttributes<HTMLSixDetailsElement>;
+            "six-dialog": LocalJSX.SixDialog & JSXBase.HTMLAttributes<HTMLSixDialogElement>;
+            "six-drawer": LocalJSX.SixDrawer & JSXBase.HTMLAttributes<HTMLSixDrawerElement>;
+            "six-dropdown": LocalJSX.SixDropdown & JSXBase.HTMLAttributes<HTMLSixDropdownElement>;
+            "six-error-page": LocalJSX.SixErrorPage & JSXBase.HTMLAttributes<HTMLSixErrorPageElement>;
+            "six-file-list": LocalJSX.SixFileList & JSXBase.HTMLAttributes<HTMLSixFileListElement>;
+            "six-file-list-item": LocalJSX.SixFileListItem & JSXBase.HTMLAttributes<HTMLSixFileListItemElement>;
+            "six-file-upload": LocalJSX.SixFileUpload & JSXBase.HTMLAttributes<HTMLSixFileUploadElement>;
+            "six-footer": LocalJSX.SixFooter & JSXBase.HTMLAttributes<HTMLSixFooterElement>;
+            "six-form": LocalJSX.SixForm & JSXBase.HTMLAttributes<HTMLSixFormElement>;
+            "six-group-label": LocalJSX.SixGroupLabel & JSXBase.HTMLAttributes<HTMLSixGroupLabelElement>;
+            "six-header": LocalJSX.SixHeader & JSXBase.HTMLAttributes<HTMLSixHeaderElement>;
+            "six-icon": LocalJSX.SixIcon & JSXBase.HTMLAttributes<HTMLSixIconElement>;
+            "six-icon-button": LocalJSX.SixIconButton & JSXBase.HTMLAttributes<HTMLSixIconButtonElement>;
+            "six-input": LocalJSX.SixInput & JSXBase.HTMLAttributes<HTMLSixInputElement>;
+            "six-item-picker": LocalJSX.SixItemPicker & JSXBase.HTMLAttributes<HTMLSixItemPickerElement>;
+            "six-language-switcher": LocalJSX.SixLanguageSwitcher & JSXBase.HTMLAttributes<HTMLSixLanguageSwitcherElement>;
+            "six-layout-grid": LocalJSX.SixLayoutGrid & JSXBase.HTMLAttributes<HTMLSixLayoutGridElement>;
+            "six-main-container": LocalJSX.SixMainContainer & JSXBase.HTMLAttributes<HTMLSixMainContainerElement>;
+            "six-menu": LocalJSX.SixMenu & JSXBase.HTMLAttributes<HTMLSixMenuElement>;
+            "six-menu-divider": LocalJSX.SixMenuDivider & JSXBase.HTMLAttributes<HTMLSixMenuDividerElement>;
+            "six-menu-item": LocalJSX.SixMenuItem & JSXBase.HTMLAttributes<HTMLSixMenuItemElement>;
+            "six-menu-label": LocalJSX.SixMenuLabel & JSXBase.HTMLAttributes<HTMLSixMenuLabelElement>;
+            "six-picto": LocalJSX.SixPicto & JSXBase.HTMLAttributes<HTMLSixPictoElement>;
+            "six-progress-bar": LocalJSX.SixProgressBar & JSXBase.HTMLAttributes<HTMLSixProgressBarElement>;
+            "six-progress-ring": LocalJSX.SixProgressRing & JSXBase.HTMLAttributes<HTMLSixProgressRingElement>;
+            "six-radio": LocalJSX.SixRadio & JSXBase.HTMLAttributes<HTMLSixRadioElement>;
+            "six-range": LocalJSX.SixRange & JSXBase.HTMLAttributes<HTMLSixRangeElement>;
+            "six-root": LocalJSX.SixRoot & JSXBase.HTMLAttributes<HTMLSixRootElement>;
+            "six-search-field": LocalJSX.SixSearchField & JSXBase.HTMLAttributes<HTMLSixSearchFieldElement>;
+            "six-select": LocalJSX.SixSelect & JSXBase.HTMLAttributes<HTMLSixSelectElement>;
+            "six-sidebar": LocalJSX.SixSidebar & JSXBase.HTMLAttributes<HTMLSixSidebarElement>;
+            "six-sidebar-item": LocalJSX.SixSidebarItem & JSXBase.HTMLAttributes<HTMLSixSidebarItemElement>;
+            "six-sidebar-item-group": LocalJSX.SixSidebarItemGroup & JSXBase.HTMLAttributes<HTMLSixSidebarItemGroupElement>;
+            "six-spinner": LocalJSX.SixSpinner & JSXBase.HTMLAttributes<HTMLSixSpinnerElement>;
+            "six-stage-indicator": LocalJSX.SixStageIndicator & JSXBase.HTMLAttributes<HTMLSixStageIndicatorElement>;
+            "six-switch": LocalJSX.SixSwitch & JSXBase.HTMLAttributes<HTMLSixSwitchElement>;
+            "six-tab": LocalJSX.SixTab & JSXBase.HTMLAttributes<HTMLSixTabElement>;
+            "six-tab-group": LocalJSX.SixTabGroup & JSXBase.HTMLAttributes<HTMLSixTabGroupElement>;
+            "six-tab-panel": LocalJSX.SixTabPanel & JSXBase.HTMLAttributes<HTMLSixTabPanelElement>;
+            "six-table": LocalJSX.SixTable & JSXBase.HTMLAttributes<HTMLSixTableElement>;
+            "six-table-cell": LocalJSX.SixTableCell & JSXBase.HTMLAttributes<HTMLSixTableCellElement>;
+            "six-table-header": LocalJSX.SixTableHeader & JSXBase.HTMLAttributes<HTMLSixTableHeaderElement>;
+            "six-table-header-cell": LocalJSX.SixTableHeaderCell & JSXBase.HTMLAttributes<HTMLSixTableHeaderCellElement>;
+            "six-table-row": LocalJSX.SixTableRow & JSXBase.HTMLAttributes<HTMLSixTableRowElement>;
+            "six-tag": LocalJSX.SixTag & JSXBase.HTMLAttributes<HTMLSixTagElement>;
+            "six-textarea": LocalJSX.SixTextarea & JSXBase.HTMLAttributes<HTMLSixTextareaElement>;
+            "six-tile": LocalJSX.SixTile & JSXBase.HTMLAttributes<HTMLSixTileElement>;
+            "six-timepicker": LocalJSX.SixTimepicker & JSXBase.HTMLAttributes<HTMLSixTimepickerElement>;
+            "six-tooltip": LocalJSX.SixTooltip & JSXBase.HTMLAttributes<HTMLSixTooltipElement>;
+        }
+    }
+}