@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.daba936

package/dist/types/components.d.ts

@@ -5,6 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { AlertType } from "./components/six-alert/six-alert";
 import { EmptyPayload } from "./utils/types";
 import { SixDateFormats } from "./components/six-datepicker/six-date-formats";
 import { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker";
@@ -12,7 +13,6 @@ 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";
@@ -26,6 +26,7 @@ import { StageType as StageType1 } from "./components/six-stage-indicator/six-st
 import { SixTabHidePayload, SixTabShowPayload } from "./components/six-tab-group/six-tab-group";
 import { TimeFormat } from "./utils/time.util";
 import { SixTimepickerChange } from "./components/six-timepicker/six-timepicker";
+export { AlertType } from "./components/six-alert/six-alert";
 export { EmptyPayload } from "./utils/types";
 export { SixDateFormats } from "./components/six-datepicker/six-date-formats";
 export { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker";
@@ -33,7 +34,6 @@ export { SixMenuItemData } from "./components/six-menu/six-menu";
 export { SixDropdownAsyncFilterPayload, SixDropdownAutoFilterPayload, SixDropdownScrollPayload } from "./components/six-dropdown/six-dropdown";
 export { SixFileListDownloadPayload, SixFileListRemovePayload } from "./components/six-file-list-item/six-file-list-item";
 export { SixFileUploadFailurePayload, SixFileUploadSuccessPayload } from "./components/six-file-upload/six-file-upload";
-export { SixFormChangePayload, SixFormSubmitPayload } from "./components/six-form/six-form";
 export { SixHeaderAppSwitcherSelectPayload, SixHeaderProfileSelectPayload, SixHeaderSearchFieldToggle } from "./components/six-header/six-header";
 export { ItemPickerPaddingDirection, ItemPickerType } from "./components/six-item-picker/types";
 export { SixItemPickerChangePayload } from "./components/six-item-picker/six-item-picker";
@@ -82,12 +82,13 @@ export namespace Components {
         "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.
+          * @param adjustPosition If true, the top and right position of the toast stack is shifted according to the six-root header's height and the presence of a vertical scrollbar.
          */
-        "toast": () => Promise<void>;
+        "toast": (adjustPosition?: boolean) => Promise<void>;
         /**
           * The type of alert.
          */
-        "type": 'primary' | 'success' | 'info' | 'warning' | 'danger';
+        "type": AlertType;
     }
     /**
      * @since 1.0
@@ -214,10 +215,6 @@ export namespace Components {
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface SixCheckbox {
-        /**
-          * Checks for validity.
-         */
-        "checkValidity": () => Promise<boolean>;
         /**
           * Set to true to draw the checkbox in a checked state.
          */
@@ -227,23 +224,23 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur": boolean;
+        "errorText": string | string[];
         /**
-          * The checkbox's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText": string;
+        "errorTextCount"?: number;
         /**
           * 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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid": boolean;
         /**
-          * The checkbox label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label": string;
         /**
@@ -255,21 +252,9 @@ export namespace Components {
          */
         "removeFocus": () => Promise<void>;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean | undefined>;
-        /**
-          * Set to true to make the checkbox a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "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.
          */
@@ -288,10 +273,6 @@ export namespace Components {
           * 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 | undefined>;
         /**
           * Set to true to add a clear button when the input is populated.
          */
@@ -321,13 +302,13 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur": boolean;
+        "errorText": string | string[];
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText": string;
+        "errorTextCount"?: number;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
          */
@@ -341,7 +322,11 @@ export namespace Components {
          */
         "inline": boolean;
         /**
-          * The input's label. Alternatively, you can use the label slot.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+         */
+        "invalid": boolean;
+        /**
+          * The label text.
          */
         "label": string;
         /**
@@ -377,25 +362,17 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean | undefined>;
-        /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "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.
+          * Sets focus on the datepickers input.
          */
-        "setCustomValidity": (message: string) => Promise<void>;
+        "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * Datepicker size.
          */
@@ -575,6 +552,10 @@ export namespace Components {
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
          */
         "hoist": boolean;
+        /**
+          * Determines if the dropdown panel's width should match the width of the trigger element.  If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width.
+         */
+        "matchTriggerWidth": boolean;
         /**
           * Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods.
          */
@@ -600,6 +581,7 @@ export namespace Components {
     | 'left-end';
         /**
           * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu is activated.
+          * @deprecated : use the property `matchTriggerWidth` instead.
          */
         "reposition": () => Promise<void>;
         /**
@@ -615,6 +597,12 @@ export namespace Components {
          */
         "virtualScroll": boolean;
     }
+    /**
+     * @since 4.0
+     * @status beta
+     */
+    interface SixError {
+    }
     interface SixErrorPage {
         /**
           * Defines a custom description.
@@ -709,37 +697,6 @@ export namespace Components {
      */
     interface SixFooter {
     }
-    /**
-     * @since 1.0
-     * @status stable
-     * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
-     */
-    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>;
-    }
     /**
      * @since 1.1
      * @status stable
@@ -758,7 +715,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * The label's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required": boolean;
         /**
@@ -779,6 +736,10 @@ export namespace Components {
           * Get open state for search
          */
         "getIsSearchOpen": () => Promise<boolean>;
+        /**
+          * Set whether the hamburger menu should be visible or not
+         */
+        "hideHamburgerMenu": boolean;
         /**
           * Set the hamburger menu icon to open or closed state
          */
@@ -866,10 +827,6 @@ export namespace Components {
           * 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.
          */
@@ -879,21 +836,17 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * Internal: Styles the input for the dropdown filter search.
          */
-        "errorOnBlur": boolean;
+        "dropdownSearch": boolean;
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorText": string;
+        "errorText": string | string[];
         /**
-          * Returns the native input's validationMessage
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "getValidationMessage": () => Promise<string>;
-        /**
-          * Returns the native input's validity
-         */
-        "getValidity": () => Promise<ValidityState | undefined>;
+        "errorTextCount"?: number;
         /**
           * The input's help text. Alternatively, you can use the help-text slot.
          */
@@ -903,15 +856,11 @@ export namespace Components {
          */
         "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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid": boolean;
         /**
-          * Returns the native input's validity
-         */
-        "isValid": () => Promise<boolean>;
-        /**
-          * The input's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label": string;
         /**
@@ -959,25 +908,13 @@ export namespace Components {
          */
         "removeFocus": () => Promise<void>;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean | undefined>;
-        /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "required": boolean;
-        /**
-          * Resets the formcontrol
-         */
-        "reset": () => Promise<void>;
         /**
           * Selects all the text in the input.
          */
         "select": () => Promise<void | undefined>;
-        /**
-          * 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.
          */
@@ -1113,6 +1050,10 @@ export namespace Components {
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface SixMenu {
+        /**
+          * Internal: Disables handling of key presses.
+         */
+        "disableKeyboardHandling": boolean;
         /**
           * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling
          */
@@ -1156,7 +1097,11 @@ export namespace Components {
      */
     interface SixMenuItem {
         /**
-          * Set to true to draw the item in a checked state.
+          * Defines if the checked state is displayed as a checkbox or a check-icon
+         */
+        "checkType": 'checkbox' | 'check';
+        /**
+          * Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the checked state
          */
         "checked": boolean;
         /**
@@ -1237,10 +1182,6 @@ export namespace Components {
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface SixRadio {
-        /**
-          * Checks for validity.
-         */
-        "checkValidity": () => Promise<boolean>;
         /**
           * Set to true to draw the radio in a checked state.
          */
@@ -1250,7 +1191,7 @@ export namespace Components {
          */
         "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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid": boolean;
         /**
@@ -1261,18 +1202,6 @@ export namespace Components {
           * 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 | undefined>;
-        /**
-          * 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.
          */
@@ -1293,23 +1222,23 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur": boolean;
+        "errorText": string | string[];
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText": string;
+        "errorTextCount"?: number;
         /**
           * 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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid": boolean;
         /**
-          * The range's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label": string;
         /**
@@ -1329,17 +1258,9 @@ export namespace Components {
          */
         "removeFocus": () => Promise<void>;
         /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "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.
          */
@@ -1423,30 +1344,22 @@ export namespace Components {
           * Set to true to turn the six-select into an autocomplete.
          */
         "autocomplete": boolean;
-        /**
-          * Checks for validity.
-         */
-        "checkValidity": () => Promise<boolean | undefined>;
         /**
           * 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
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur": boolean;
+        "errorText": string | string[];
         /**
-          * The select's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText": string;
+        "errorTextCount"?: number;
         /**
           * Set to true to allow filtering for entries in the dropdown
          */
@@ -1454,7 +1367,7 @@ export namespace Components {
         /**
           * The debounce for the filter callbacks.
          */
-        "filterDebounce": number;
+        "filterDebounce"?: number;
         /**
           * The filter's placeholder text.
          */
@@ -1472,11 +1385,11 @@ export namespace Components {
          */
         "inputDebounce": number;
         /**
-          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid": boolean;
         /**
-          * The select's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label": string;
         /**
@@ -1485,6 +1398,7 @@ export namespace Components {
         "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.
+          * @deprecated : This property is ignored. The component now displays as many items as possible and computes the "+n" dynamically.
          */
         "maxTagsVisible": number;
         /**
@@ -1508,21 +1422,21 @@ export namespace Components {
          */
         "placeholder": string;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
+          * Set to true to show an asterisk beneath the label.
          */
-        "reportValidity": () => Promise<boolean | undefined>;
+        "required": boolean;
         /**
-          * The select's required attribute.
+          * Enables the select all button.
          */
-        "required": boolean;
+        "selectAllButton": boolean;
         /**
-          * Resets the formcontrol
+          * Custom text for the "select all" button. Defaults to "Select all" and equivalents in supported languages.
          */
-        "reset": () => Promise<void>;
+        "selectAllText"?: string;
         /**
-          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+          * Sets focus on the select.
          */
-        "setCustomValidity": (message: string) => Promise<void>;
+        "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * The select's size.
          */
@@ -1587,6 +1501,10 @@ export namespace Components {
           * Set to true to draw the sidebar item in a disabled state.
          */
         "disabled": boolean;
+        /**
+          * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
+         */
+        "href": string | undefined;
         /**
           * Set to true to draw the item in a selected state.
          */
@@ -1601,6 +1519,10 @@ export namespace Components {
      * @status stable
      */
     interface SixSidebarItemGroup {
+        /**
+          * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
+         */
+        "href": string | undefined;
         /**
           * Icon of the group
          */
@@ -1645,10 +1567,6 @@ export namespace Components {
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface SixSwitch {
-        /**
-          * Checks for validity.
-         */
-        "checkValidity": () => Promise<boolean | undefined>;
         /**
           * Set to true to draw the switch in a checked state.
          */
@@ -1658,33 +1576,33 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+          * The error message shown, if `invalid` is set to true.
          */
-        "invalid": boolean;
+        "errorText": string | string[];
         /**
-          * The switch's name attribute.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "name": string;
+        "errorTextCount"?: number;
         /**
-          * Removes focus from the switch.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
-        "removeFocus": () => Promise<void>;
+        "invalid": boolean;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
+          * The label text.
          */
-        "reportValidity": () => Promise<boolean | undefined>;
+        "label": string;
         /**
-          * Set to true to make the switch a required field.
+          * The switch's name attribute.
          */
-        "required": boolean;
+        "name": string;
         /**
-          * Resets the formcontrol
+          * Removes focus from the switch.
          */
-        "reset": () => Promise<void>;
+        "removeFocus": () => Promise<void>;
         /**
-          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
+          * Set to true to show an asterisk beneath the label.
          */
-        "setCustomValidity": (message: string) => Promise<void>;
+        "required": boolean;
         /**
           * Sets focus on the switch.
          */
@@ -1804,22 +1722,18 @@ export namespace Components {
           * 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
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur": boolean;
+        "errorText": string | string[];
         /**
-          * The textarea's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText": string;
+        "errorTextCount"?: number;
         /**
           * The textarea's help text. Alternatively, you can use the help-text slot.
          */
@@ -1829,11 +1743,11 @@ export namespace Components {
          */
         "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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid": boolean;
         /**
-          * The textarea's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label": string;
         /**
@@ -1861,17 +1775,9 @@ export namespace Components {
          */
         "removeFocus": () => Promise<void>;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean | undefined>;
-        /**
-          * The textarea's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required": boolean;
-        /**
-          * Resets the formcontrol
-         */
-        "reset": () => Promise<void>;
         /**
           * Controls how the textarea can be resized.
          */
@@ -1884,10 +1790,6 @@ export namespace Components {
           * Selects all the text in the input.
          */
         "select": () => Promise<void | undefined>;
-        /**
-          * 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.
          */
@@ -1960,10 +1862,6 @@ export namespace Components {
      * @status experimental
      */
     interface SixTimepicker {
-        /**
-          * Checks for validity.
-         */
-        "checkValidity": () => Promise<boolean | undefined>;
         /**
           * Set to true to add a clear button when the input is populated.
          */
@@ -1981,13 +1879,13 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The input's error text. Alternatively, you can use the error-text slot.
          */
-        "errorOnBlur": boolean;
+        "errorText": string | string[];
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText": string;
+        "errorTextCount"?: number;
         /**
           * 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
          */
@@ -2008,6 +1906,10 @@ export namespace Components {
           * 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;
+        /**
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+         */
+        "invalid": boolean;
         /**
           * The input's label. Alternatively, you can use the label slot.
          */
@@ -2033,25 +1935,17 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean | undefined>;
-        /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "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.
+          * Sets focus on the datepickers input.
          */
-        "setCustomValidity": (message: string) => Promise<void>;
+        "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * Timepicker size.
          */
@@ -2160,10 +2054,6 @@ export interface SixFileUploadCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixFileUploadElement;
 }
-export interface SixFormCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLSixFormElement;
-}
 export interface SixHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixHeaderElement;
@@ -2247,12 +2137,26 @@ declare global {
         prototype: HTMLSetAttributesElement;
         new (): HTMLSetAttributesElement;
     };
+    interface HTMLSixAlertElementEventMap {
+        "six-alert-show": EmptyPayload;
+        "six-alert-after-show": EmptyPayload;
+        "six-alert-hide": EmptyPayload;
+        "six-alert-after-hide": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixAlertElement extends Components.SixAlert, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixAlertElementEventMap>(type: K, listener: (this: HTMLSixAlertElement, ev: SixAlertCustomEvent<HTMLSixAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixAlertElementEventMap>(type: K, listener: (this: HTMLSixAlertElement, ev: SixAlertCustomEvent<HTMLSixAlertElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixAlertElement: {
         prototype: HTMLSixAlertElement;
@@ -2280,12 +2184,24 @@ declare global {
         prototype: HTMLSixBadgeElement;
         new (): HTMLSixBadgeElement;
     };
+    interface HTMLSixButtonElementEventMap {
+        "six-button-blur": EmptyPayload;
+        "six-button-focus": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixButtonElement extends Components.SixButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixButtonElementEventMap>(type: K, listener: (this: HTMLSixButtonElement, ev: SixButtonCustomEvent<HTMLSixButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixButtonElementEventMap>(type: K, listener: (this: HTMLSixButtonElement, ev: SixButtonCustomEvent<HTMLSixButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixButtonElement: {
         prototype: HTMLSixButtonElement;
@@ -2301,71 +2217,170 @@ declare global {
         prototype: HTMLSixCardElement;
         new (): HTMLSixCardElement;
     };
+    interface HTMLSixCheckboxElementEventMap {
+        "six-checkbox-blur": EmptyPayload;
+        "six-checkbox-change": EmptyPayload;
+        "six-checkbox-focus": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixCheckboxElement extends Components.SixCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixCheckboxElementEventMap>(type: K, listener: (this: HTMLSixCheckboxElement, ev: SixCheckboxCustomEvent<HTMLSixCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixCheckboxElementEventMap>(type: K, listener: (this: HTMLSixCheckboxElement, ev: SixCheckboxCustomEvent<HTMLSixCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixCheckboxElement: {
         prototype: HTMLSixCheckboxElement;
         new (): HTMLSixCheckboxElement;
     };
+    interface HTMLSixDatepickerElementEventMap {
+        "six-datepicker-select": SixDatepickerSelectPayload;
+        "six-datepicker-clear": EmptyPayload;
+        "six-datepicker-blur": SixDatepickerSelectPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      */
     interface HTMLSixDatepickerElement extends Components.SixDatepicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixDatepickerElementEventMap>(type: K, listener: (this: HTMLSixDatepickerElement, ev: SixDatepickerCustomEvent<HTMLSixDatepickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixDatepickerElementEventMap>(type: K, listener: (this: HTMLSixDatepickerElement, ev: SixDatepickerCustomEvent<HTMLSixDatepickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixDatepickerElement: {
         prototype: HTMLSixDatepickerElement;
         new (): HTMLSixDatepickerElement;
     };
+    interface HTMLSixDetailsElementEventMap {
+        "six-details-show": EmptyPayload;
+        "six-details-after-show": EmptyPayload;
+        "six-details-hide": EmptyPayload;
+        "six-details-after-hide": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixDetailsElement extends Components.SixDetails, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixDetailsElementEventMap>(type: K, listener: (this: HTMLSixDetailsElement, ev: SixDetailsCustomEvent<HTMLSixDetailsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixDetailsElementEventMap>(type: K, listener: (this: HTMLSixDetailsElement, ev: SixDetailsCustomEvent<HTMLSixDetailsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixDetailsElement: {
         prototype: HTMLSixDetailsElement;
         new (): HTMLSixDetailsElement;
     };
+    interface HTMLSixDialogElementEventMap {
+        "six-dialog-show": EmptyPayload;
+        "six-dialog-after-show": EmptyPayload;
+        "six-dialog-hide": EmptyPayload;
+        "six-dialog-after-hide": EmptyPayload;
+        "six-dialog-initial-focus": EmptyPayload;
+        "six-dialog-overlay-dismiss": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixDialogElement extends Components.SixDialog, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixDialogElementEventMap>(type: K, listener: (this: HTMLSixDialogElement, ev: SixDialogCustomEvent<HTMLSixDialogElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixDialogElementEventMap>(type: K, listener: (this: HTMLSixDialogElement, ev: SixDialogCustomEvent<HTMLSixDialogElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixDialogElement: {
         prototype: HTMLSixDialogElement;
         new (): HTMLSixDialogElement;
     };
+    interface HTMLSixDrawerElementEventMap {
+        "six-drawer-show": EmptyPayload;
+        "six-drawer-after-show": EmptyPayload;
+        "six-drawer-hide": EmptyPayload;
+        "six-drawer-after-hide": EmptyPayload;
+        "six-drawer-initial-focus": EmptyPayload;
+        "six-drawer-overlay-dismiss": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixDrawerElement extends Components.SixDrawer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixDrawerElementEventMap>(type: K, listener: (this: HTMLSixDrawerElement, ev: SixDrawerCustomEvent<HTMLSixDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixDrawerElementEventMap>(type: K, listener: (this: HTMLSixDrawerElement, ev: SixDrawerCustomEvent<HTMLSixDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixDrawerElement: {
         prototype: HTMLSixDrawerElement;
         new (): HTMLSixDrawerElement;
     };
+    interface HTMLSixDropdownElementEventMap {
+        "six-dropdown-show": EmptyPayload;
+        "six-dropdown-after-show": EmptyPayload;
+        "six-dropdown-hide": EmptyPayload;
+        "six-dropdown-after-hide": EmptyPayload;
+        "six-dropdown-auto-filter-fired": SixDropdownAutoFilterPayload;
+        "six-async-filter-fired": SixDropdownAsyncFilterPayload;
+        "six-dropdown-scroll": SixDropdownScrollPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixDropdownElement extends Components.SixDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixDropdownElementEventMap>(type: K, listener: (this: HTMLSixDropdownElement, ev: SixDropdownCustomEvent<HTMLSixDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixDropdownElementEventMap>(type: K, listener: (this: HTMLSixDropdownElement, ev: SixDropdownCustomEvent<HTMLSixDropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixDropdownElement: {
         prototype: HTMLSixDropdownElement;
         new (): HTMLSixDropdownElement;
     };
+    /**
+     * @since 4.0
+     * @status beta
+     */
+    interface HTMLSixErrorElement extends Components.SixError, HTMLStencilElement {
+    }
+    var HTMLSixErrorElement: {
+        prototype: HTMLSixErrorElement;
+        new (): HTMLSixErrorElement;
+    };
     interface HTMLSixErrorPageElement extends Components.SixErrorPage, HTMLStencilElement {
     }
     var HTMLSixErrorPageElement: {
@@ -2382,21 +2397,45 @@ declare global {
         prototype: HTMLSixFileListElement;
         new (): HTMLSixFileListElement;
     };
+    interface HTMLSixFileListItemElementEventMap {
+        "six-file-list-item-download": SixFileListDownloadPayload;
+        "six-file-list-item-remove": SixFileListRemovePayload;
+    }
     /**
      * @since 2.0.0
      * @status experimental
      */
     interface HTMLSixFileListItemElement extends Components.SixFileListItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixFileListItemElementEventMap>(type: K, listener: (this: HTMLSixFileListItemElement, ev: SixFileListItemCustomEvent<HTMLSixFileListItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixFileListItemElementEventMap>(type: K, listener: (this: HTMLSixFileListItemElement, ev: SixFileListItemCustomEvent<HTMLSixFileListItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixFileListItemElement: {
         prototype: HTMLSixFileListItemElement;
         new (): HTMLSixFileListItemElement;
     };
+    interface HTMLSixFileUploadElementEventMap {
+        "six-file-upload-success": SixFileUploadSuccessPayload;
+        "six-file-upload-failure": SixFileUploadFailurePayload;
+    }
     /**
      * @since 2.0.0
      * @status experimental
      */
     interface HTMLSixFileUploadElement extends Components.SixFileUpload, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixFileUploadElementEventMap>(type: K, listener: (this: HTMLSixFileUploadElement, ev: SixFileUploadCustomEvent<HTMLSixFileUploadElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixFileUploadElementEventMap>(type: K, listener: (this: HTMLSixFileUploadElement, ev: SixFileUploadCustomEvent<HTMLSixFileUploadElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixFileUploadElement: {
         prototype: HTMLSixFileUploadElement;
@@ -2412,17 +2451,6 @@ declare global {
         prototype: HTMLSixFooterElement;
         new (): HTMLSixFooterElement;
     };
-    /**
-     * @since 1.0
-     * @status stable
-     * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
-     */
-    interface HTMLSixFormElement extends Components.SixForm, HTMLStencilElement {
-    }
-    var HTMLSixFormElement: {
-        prototype: HTMLSixFormElement;
-        new (): HTMLSixFormElement;
-    };
     /**
      * @since 1.1
      * @status stable
@@ -2433,11 +2461,27 @@ declare global {
         prototype: HTMLSixGroupLabelElement;
         new (): HTMLSixGroupLabelElement;
     };
+    interface HTMLSixHeaderElementEventMap {
+        "six-header-app-name-clicked": EmptyPayload;
+        "six-header-app-switcher-select": SixHeaderAppSwitcherSelectPayload;
+        "six-header-profile-select": SixHeaderProfileSelectPayload;
+        "six-header-hamburger-menu-clicked": EmptyPayload;
+        "six-header-logo-clicked": EmptyPayload;
+        "six-header-search-field-toggle": SixHeaderSearchFieldToggle;
+    }
     /**
      * @since 1.0
      * @status stable
      */
     interface HTMLSixHeaderElement extends Components.SixHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixHeaderElementEventMap>(type: K, listener: (this: HTMLSixHeaderElement, ev: SixHeaderCustomEvent<HTMLSixHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixHeaderElementEventMap>(type: K, listener: (this: HTMLSixHeaderElement, ev: SixHeaderCustomEvent<HTMLSixHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixHeaderElement: {
         prototype: HTMLSixHeaderElement;
@@ -2464,28 +2508,66 @@ declare global {
         prototype: HTMLSixIconButtonElement;
         new (): HTMLSixIconButtonElement;
     };
+    interface HTMLSixInputElementEventMap {
+        "six-input-change": EmptyPayload;
+        "six-input-clear": EmptyPayload;
+        "six-input-input": EmptyPayload;
+        "six-input-focus": EmptyPayload;
+        "six-input-blur": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixInputElement extends Components.SixInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixInputElementEventMap>(type: K, listener: (this: HTMLSixInputElement, ev: SixInputCustomEvent<HTMLSixInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixInputElementEventMap>(type: K, listener: (this: HTMLSixInputElement, ev: SixInputCustomEvent<HTMLSixInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixInputElement: {
         prototype: HTMLSixInputElement;
         new (): HTMLSixInputElement;
     };
+    interface HTMLSixItemPickerElementEventMap {
+        "six-item-picker-change": SixItemPickerChangePayload;
+        "six-item-picker-change-debounced": SixItemPickerChangePayload;
+    }
     /**
      * @since 2.0.0
      * @status experimental
      */
     interface HTMLSixItemPickerElement extends Components.SixItemPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixItemPickerElementEventMap>(type: K, listener: (this: HTMLSixItemPickerElement, ev: SixItemPickerCustomEvent<HTMLSixItemPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixItemPickerElementEventMap>(type: K, listener: (this: HTMLSixItemPickerElement, ev: SixItemPickerCustomEvent<HTMLSixItemPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixItemPickerElement: {
         prototype: HTMLSixItemPickerElement;
         new (): HTMLSixItemPickerElement;
     };
+    interface HTMLSixLanguageSwitcherElementEventMap {
+        "six-language-switcher-change": SixLanguageSwitcherChangePayload;
+    }
     interface HTMLSixLanguageSwitcherElement extends Components.SixLanguageSwitcher, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixLanguageSwitcherElementEventMap>(type: K, listener: (this: HTMLSixLanguageSwitcherElement, ev: SixLanguageSwitcherCustomEvent<HTMLSixLanguageSwitcherElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixLanguageSwitcherElementEventMap>(type: K, listener: (this: HTMLSixLanguageSwitcherElement, ev: SixLanguageSwitcherCustomEvent<HTMLSixLanguageSwitcherElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixLanguageSwitcherElement: {
         prototype: HTMLSixLanguageSwitcherElement;
@@ -2511,12 +2593,23 @@ declare global {
         prototype: HTMLSixMainContainerElement;
         new (): HTMLSixMainContainerElement;
     };
+    interface HTMLSixMenuElementEventMap {
+        "six-menu-item-selected": SixMenuItemSelectedPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixMenuElement extends Components.SixMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixMenuElementEventMap>(type: K, listener: (this: HTMLSixMenuElement, ev: SixMenuCustomEvent<HTMLSixMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixMenuElementEventMap>(type: K, listener: (this: HTMLSixMenuElement, ev: SixMenuCustomEvent<HTMLSixMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixMenuElement: {
         prototype: HTMLSixMenuElement;
@@ -2587,64 +2680,140 @@ declare global {
         prototype: HTMLSixProgressRingElement;
         new (): HTMLSixProgressRingElement;
     };
+    interface HTMLSixRadioElementEventMap {
+        "six-radio-blur": EmptyPayload;
+        "six-radio-change": EmptyPayload;
+        "six-radio-focus": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixRadioElement extends Components.SixRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixRadioElementEventMap>(type: K, listener: (this: HTMLSixRadioElement, ev: SixRadioCustomEvent<HTMLSixRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixRadioElementEventMap>(type: K, listener: (this: HTMLSixRadioElement, ev: SixRadioCustomEvent<HTMLSixRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixRadioElement: {
         prototype: HTMLSixRadioElement;
         new (): HTMLSixRadioElement;
     };
+    interface HTMLSixRangeElementEventMap {
+        "six-range-change": EmptyPayload;
+        "six-range-blur": EmptyPayload;
+        "six-range-focus": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixRangeElement extends Components.SixRange, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixRangeElementEventMap>(type: K, listener: (this: HTMLSixRangeElement, ev: SixRangeCustomEvent<HTMLSixRangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixRangeElementEventMap>(type: K, listener: (this: HTMLSixRangeElement, ev: SixRangeCustomEvent<HTMLSixRangeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixRangeElement: {
         prototype: HTMLSixRangeElement;
         new (): HTMLSixRangeElement;
     };
+    interface HTMLSixRootElementEventMap {
+        "six-root-collapsed": SixRootCollapsedPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      */
     interface HTMLSixRootElement extends Components.SixRoot, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixRootElementEventMap>(type: K, listener: (this: HTMLSixRootElement, ev: SixRootCustomEvent<HTMLSixRootElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixRootElementEventMap>(type: K, listener: (this: HTMLSixRootElement, ev: SixRootCustomEvent<HTMLSixRootElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixRootElement: {
         prototype: HTMLSixRootElement;
         new (): HTMLSixRootElement;
     };
+    interface HTMLSixSearchFieldElementEventMap {
+        "six-search-field-change": SixSearchFieldChangePayload;
+    }
     /**
      * @since 1.0
      * @status stable
      */
     interface HTMLSixSearchFieldElement extends Components.SixSearchField, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixSearchFieldElementEventMap>(type: K, listener: (this: HTMLSixSearchFieldElement, ev: SixSearchFieldCustomEvent<HTMLSixSearchFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixSearchFieldElementEventMap>(type: K, listener: (this: HTMLSixSearchFieldElement, ev: SixSearchFieldCustomEvent<HTMLSixSearchFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixSearchFieldElement: {
         prototype: HTMLSixSearchFieldElement;
         new (): HTMLSixSearchFieldElement;
     };
+    interface HTMLSixSelectElementEventMap {
+        "six-select-change": SixSelectChangePayload;
+        "six-select-focus": EmptyPayload;
+        "six-select-blur": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixSelectElement extends Components.SixSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixSelectElementEventMap>(type: K, listener: (this: HTMLSixSelectElement, ev: SixSelectCustomEvent<HTMLSixSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixSelectElementEventMap>(type: K, listener: (this: HTMLSixSelectElement, ev: SixSelectCustomEvent<HTMLSixSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixSelectElement: {
         prototype: HTMLSixSelectElement;
         new (): HTMLSixSelectElement;
     };
+    interface HTMLSixSidebarElementEventMap {
+        "six-sidebar-show": EmptyPayload;
+        "six-sidebar-after-show": EmptyPayload;
+        "six-sidebar-hide": EmptyPayload;
+        "six-sidebar-after-hide": EmptyPayload;
+        "six-sidebar-initial-focus": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      */
     interface HTMLSixSidebarElement extends Components.SixSidebar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixSidebarElementEventMap>(type: K, listener: (this: HTMLSixSidebarElement, ev: SixSidebarCustomEvent<HTMLSixSidebarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixSidebarElementEventMap>(type: K, listener: (this: HTMLSixSidebarElement, ev: SixSidebarCustomEvent<HTMLSixSidebarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixSidebarElement: {
         prototype: HTMLSixSidebarElement;
@@ -2687,34 +2856,70 @@ declare global {
         prototype: HTMLSixStageIndicatorElement;
         new (): HTMLSixStageIndicatorElement;
     };
+    interface HTMLSixSwitchElementEventMap {
+        "six-switch-blur": boolean;
+        "six-switch-change": boolean;
+        "six-switch-focus": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixSwitchElement extends Components.SixSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixSwitchElementEventMap>(type: K, listener: (this: HTMLSixSwitchElement, ev: SixSwitchCustomEvent<HTMLSixSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixSwitchElementEventMap>(type: K, listener: (this: HTMLSixSwitchElement, ev: SixSwitchCustomEvent<HTMLSixSwitchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixSwitchElement: {
         prototype: HTMLSixSwitchElement;
         new (): HTMLSixSwitchElement;
     };
+    interface HTMLSixTabElementEventMap {
+        "six-tab-close": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixTabElement extends Components.SixTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixTabElementEventMap>(type: K, listener: (this: HTMLSixTabElement, ev: SixTabCustomEvent<HTMLSixTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixTabElementEventMap>(type: K, listener: (this: HTMLSixTabElement, ev: SixTabCustomEvent<HTMLSixTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixTabElement: {
         prototype: HTMLSixTabElement;
         new (): HTMLSixTabElement;
     };
+    interface HTMLSixTabGroupElementEventMap {
+        "six-tab-show": SixTabShowPayload;
+        "six-tab-hide": SixTabHidePayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixTabGroupElement extends Components.SixTabGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixTabGroupElementEventMap>(type: K, listener: (this: HTMLSixTabGroupElement, ev: SixTabGroupCustomEvent<HTMLSixTabGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixTabGroupElementEventMap>(type: K, listener: (this: HTMLSixTabGroupElement, ev: SixTabGroupCustomEvent<HTMLSixTabGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixTabGroupElement: {
         prototype: HTMLSixTabGroupElement;
@@ -2731,54 +2936,118 @@ declare global {
         prototype: HTMLSixTabPanelElement;
         new (): HTMLSixTabPanelElement;
     };
+    interface HTMLSixTagElementEventMap {
+        "six-tag-clear": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixTagElement extends Components.SixTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixTagElementEventMap>(type: K, listener: (this: HTMLSixTagElement, ev: SixTagCustomEvent<HTMLSixTagElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixTagElementEventMap>(type: K, listener: (this: HTMLSixTagElement, ev: SixTagCustomEvent<HTMLSixTagElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixTagElement: {
         prototype: HTMLSixTagElement;
         new (): HTMLSixTagElement;
     };
+    interface HTMLSixTextareaElementEventMap {
+        "six-textarea-change": EmptyPayload;
+        "six-textarea-input": EmptyPayload;
+        "six-textarea-focus": EmptyPayload;
+        "six-textarea-blur": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixTextareaElement extends Components.SixTextarea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixTextareaElementEventMap>(type: K, listener: (this: HTMLSixTextareaElement, ev: SixTextareaCustomEvent<HTMLSixTextareaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixTextareaElementEventMap>(type: K, listener: (this: HTMLSixTextareaElement, ev: SixTextareaCustomEvent<HTMLSixTextareaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixTextareaElement: {
         prototype: HTMLSixTextareaElement;
         new (): HTMLSixTextareaElement;
     };
+    interface HTMLSixTileElementEventMap {
+        "six-tile-closed": EmptyPayload;
+        "six-tile-selected": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      */
     interface HTMLSixTileElement extends Components.SixTile, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixTileElementEventMap>(type: K, listener: (this: HTMLSixTileElement, ev: SixTileCustomEvent<HTMLSixTileElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixTileElementEventMap>(type: K, listener: (this: HTMLSixTileElement, ev: SixTileCustomEvent<HTMLSixTileElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixTileElement: {
         prototype: HTMLSixTileElement;
         new (): HTMLSixTileElement;
     };
+    interface HTMLSixTimepickerElementEventMap {
+        "six-timepicker-change": SixTimepickerChange;
+        "six-timepicker-change-debounced": SixTimepickerChange;
+        "six-timepicker-clear": EmptyPayload;
+    }
     /**
      * @since 2.0.0
      * @status experimental
      */
     interface HTMLSixTimepickerElement extends Components.SixTimepicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixTimepickerElementEventMap>(type: K, listener: (this: HTMLSixTimepickerElement, ev: SixTimepickerCustomEvent<HTMLSixTimepickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixTimepickerElementEventMap>(type: K, listener: (this: HTMLSixTimepickerElement, ev: SixTimepickerCustomEvent<HTMLSixTimepickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixTimepickerElement: {
         prototype: HTMLSixTimepickerElement;
         new (): HTMLSixTimepickerElement;
     };
+    interface HTMLSixTooltipElementEventMap {
+        "six-tooltip-show": EmptyPayload;
+        "six-tooltip-after-show": EmptyPayload;
+        "six-tooltip-hide": EmptyPayload;
+        "six-tooltip-after-hide": EmptyPayload;
+    }
     /**
      * @since 1.0
      * @status stable
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface HTMLSixTooltipElement extends Components.SixTooltip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixTooltipElementEventMap>(type: K, listener: (this: HTMLSixTooltipElement, ev: SixTooltipCustomEvent<HTMLSixTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixTooltipElementEventMap>(type: K, listener: (this: HTMLSixTooltipElement, ev: SixTooltipCustomEvent<HTMLSixTooltipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixTooltipElement: {
         prototype: HTMLSixTooltipElement;
@@ -2797,12 +3066,12 @@ declare global {
         "six-dialog": HTMLSixDialogElement;
         "six-drawer": HTMLSixDrawerElement;
         "six-dropdown": HTMLSixDropdownElement;
+        "six-error": HTMLSixErrorElement;
         "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;
@@ -2884,7 +3153,7 @@ declare namespace LocalJSX {
         /**
           * The type of alert.
          */
-        "type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger';
+        "type"?: AlertType;
     }
     /**
      * @since 1.0
@@ -3020,23 +3289,23 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur"?: boolean;
+        "errorText"?: string | string[];
         /**
-          * The checkbox's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText"?: string;
+        "errorTextCount"?: number;
         /**
           * 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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid"?: boolean;
         /**
-          * The checkbox label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label"?: string;
         /**
@@ -3056,7 +3325,7 @@ declare namespace LocalJSX {
          */
         "onSix-checkbox-focus"?: (event: SixCheckboxCustomEvent<EmptyPayload>) => void;
         /**
-          * Set to true to make the checkbox a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -3102,13 +3371,13 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur"?: boolean;
+        "errorText"?: string | string[];
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText"?: string;
+        "errorTextCount"?: number;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
          */
@@ -3122,7 +3391,11 @@ declare namespace LocalJSX {
          */
         "inline"?: boolean;
         /**
-          * The input's label. Alternatively, you can use the label slot.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+         */
+        "invalid"?: boolean;
+        /**
+          * The label text.
          */
         "label"?: string;
         /**
@@ -3170,7 +3443,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -3388,6 +3661,10 @@ declare namespace LocalJSX {
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
          */
         "hoist"?: boolean;
+        /**
+          * Determines if the dropdown panel's width should match the width of the trigger element.  If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width.
+         */
+        "matchTriggerWidth"?: boolean;
         /**
           * Emitted when the async filter is triggered
          */
@@ -3448,6 +3725,12 @@ declare namespace LocalJSX {
          */
         "virtualScroll"?: boolean;
     }
+    /**
+     * @since 4.0
+     * @status beta
+     */
+    interface SixError {
+    }
     interface SixErrorPage {
         /**
           * Defines a custom description.
@@ -3558,29 +3841,6 @@ declare namespace LocalJSX {
      */
     interface SixFooter {
     }
-    /**
-     * @since 1.0
-     * @status stable
-     * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
-     */
-    interface SixForm {
-        /**
-          * Prevent the form from validating inputs before submitting.
-         */
-        "novalidate"?: boolean;
-        /**
-          * Emitted when the control's value changes.
-         */
-        "onSix-form-change"?: (event: SixFormCustomEvent<SixFormChangePayload>) => void;
-        /**
-          * Emitted when the forms values are reset.
-         */
-        "onSix-form-reset"?: (event: SixFormCustomEvent<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: SixFormCustomEvent<SixFormSubmitPayload>) => void;
-    }
     /**
      * @since 1.1
      * @status stable
@@ -3599,7 +3859,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * The label's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -3616,6 +3876,10 @@ declare namespace LocalJSX {
           * Set whether the logo should be clickable
          */
         "clickableLogo"?: boolean;
+        /**
+          * Set whether the hamburger menu should be visible or not
+         */
+        "hideHamburgerMenu"?: boolean;
         /**
           * Emitted when the name of the selected app is clicked.
          */
@@ -3732,13 +3996,17 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * Internal: Styles the input for the dropdown filter search.
          */
-        "errorOnBlur"?: boolean;
+        "dropdownSearch"?: boolean;
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
+         */
+        "errorText"?: string | string[];
+        /**
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText"?: string;
+        "errorTextCount"?: number;
         /**
           * The input's help text. Alternatively, you can use the help-text slot.
          */
@@ -3748,11 +4016,11 @@ declare namespace LocalJSX {
          */
         "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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid"?: boolean;
         /**
-          * The input's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label"?: string;
         /**
@@ -3816,7 +4084,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -3954,6 +4222,10 @@ declare namespace LocalJSX {
      * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
      */
     interface SixMenu {
+        /**
+          * Internal: Disables handling of key presses.
+         */
+        "disableKeyboardHandling"?: boolean;
         /**
           * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling
          */
@@ -3997,7 +4269,11 @@ declare namespace LocalJSX {
      */
     interface SixMenuItem {
         /**
-          * Set to true to draw the item in a checked state.
+          * Defines if the checked state is displayed as a checkbox or a check-icon
+         */
+        "checkType"?: 'checkbox' | 'check';
+        /**
+          * Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the checked state
          */
         "checked"?: boolean;
         /**
@@ -4075,7 +4351,7 @@ declare namespace LocalJSX {
          */
         "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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid"?: boolean;
         /**
@@ -4110,23 +4386,23 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur"?: boolean;
+        "errorText"?: string | string[];
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText"?: string;
+        "errorTextCount"?: number;
         /**
           * 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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid"?: boolean;
         /**
-          * The range's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label"?: string;
         /**
@@ -4154,7 +4430,7 @@ declare namespace LocalJSX {
          */
         "onSix-range-focus"?: (event: SixRangeCustomEvent<EmptyPayload>) => void;
         /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4248,22 +4524,18 @@ declare namespace LocalJSX {
           * 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
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur"?: boolean;
+        "errorText"?: string | string[];
         /**
-          * The select's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText"?: string;
+        "errorTextCount"?: number;
         /**
           * Set to true to allow filtering for entries in the dropdown
          */
@@ -4289,11 +4561,11 @@ declare namespace LocalJSX {
          */
         "inputDebounce"?: number;
         /**
-          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid"?: boolean;
         /**
-          * The select's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label"?: string;
         /**
@@ -4302,6 +4574,7 @@ declare namespace LocalJSX {
         "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.
+          * @deprecated : This property is ignored. The component now displays as many items as possible and computes the "+n" dynamically.
          */
         "maxTagsVisible"?: number;
         /**
@@ -4337,9 +4610,17 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The select's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
+        /**
+          * Enables the select all button.
+         */
+        "selectAllButton"?: boolean;
+        /**
+          * Custom text for the "select all" button. Defaults to "Select all" and equivalents in supported languages.
+         */
+        "selectAllText"?: string;
         /**
           * The select's size.
          */
@@ -4404,6 +4685,10 @@ declare namespace LocalJSX {
           * Set to true to draw the sidebar item in a disabled state.
          */
         "disabled"?: boolean;
+        /**
+          * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
+         */
+        "href"?: string | undefined;
         /**
           * Set to true to draw the item in a selected state.
          */
@@ -4418,6 +4703,10 @@ declare namespace LocalJSX {
      * @status stable
      */
     interface SixSidebarItemGroup {
+        /**
+          * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
+         */
+        "href"?: string | undefined;
         /**
           * Icon of the group
          */
@@ -4471,9 +4760,21 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop.
+          * The error message shown, if `invalid` is set to true.
+         */
+        "errorText"?: string | string[];
+        /**
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
+         */
+        "errorTextCount"?: number;
+        /**
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid"?: boolean;
+        /**
+          * The label text.
+         */
+        "label"?: string;
         /**
           * The switch's name attribute.
          */
@@ -4491,7 +4792,7 @@ declare namespace LocalJSX {
          */
         "onSix-switch-focus"?: (event: SixSwitchCustomEvent<EmptyPayload>) => void;
         /**
-          * Set to true to make the switch a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4618,13 +4919,13 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The error message shown, if `invalid` is set to true.
          */
-        "errorOnBlur"?: boolean;
+        "errorText"?: string | string[];
         /**
-          * The textarea's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText"?: string;
+        "errorTextCount"?: number;
         /**
           * The textarea's help text. Alternatively, you can use the help-text slot.
          */
@@ -4634,11 +4935,11 @@ declare namespace LocalJSX {
          */
         "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.
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
          */
         "invalid"?: boolean;
         /**
-          * The textarea's label. Alternatively, you can use the label slot.
+          * The label text.
          */
         "label"?: string;
         /**
@@ -4678,7 +4979,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * The textarea's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4766,13 +5067,13 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
+          * The input's error text. Alternatively, you can use the error-text slot.
          */
-        "errorOnBlur"?: boolean;
+        "errorText"?: string | string[];
         /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
          */
-        "errorText"?: string;
+        "errorTextCount"?: number;
         /**
           * 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
          */
@@ -4793,6 +5094,10 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+         */
+        "invalid"?: boolean;
         /**
           * The input's label. Alternatively, you can use the label slot.
          */
@@ -4830,7 +5135,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Set to true to make the input a required field.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4925,12 +5230,12 @@ declare namespace LocalJSX {
         "six-dialog": SixDialog;
         "six-drawer": SixDrawer;
         "six-dropdown": SixDropdown;
+        "six-error": SixError;
         "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;
@@ -5037,6 +5342,11 @@ declare module "@stencil/core" {
              * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
              */
             "six-dropdown": LocalJSX.SixDropdown & JSXBase.HTMLAttributes<HTMLSixDropdownElement>;
+            /**
+             * @since 4.0
+             * @status beta
+             */
+            "six-error": LocalJSX.SixError & JSXBase.HTMLAttributes<HTMLSixErrorElement>;
             "six-error-page": LocalJSX.SixErrorPage & JSXBase.HTMLAttributes<HTMLSixErrorPageElement>;
             /**
              * @since 2.0.0
@@ -5058,12 +5368,6 @@ declare module "@stencil/core" {
              * @status stable
              */
             "six-footer": LocalJSX.SixFooter & JSXBase.HTMLAttributes<HTMLSixFooterElement>;
-            /**
-             * @since 1.0
-             * @status stable
-             * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
-             */
-            "six-form": LocalJSX.SixForm & JSXBase.HTMLAttributes<HTMLSixFormElement>;
             /**
              * @since 1.1
              * @status stable