@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.cd0cd0d

package/dist/types/components.d.ts

@@ -12,7 +12,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";
@@ -24,7 +23,7 @@ import { SixSearchFieldChangePayload } from "./components/six-search-field/six-s
 import { SixSelectChangePayload } from "./components/six-select/six-select";
 import { StageType as StageType1 } from "./components/six-stage-indicator/six-stage-indicator";
 import { SixTabHidePayload, SixTabShowPayload } from "./components/six-tab-group/six-tab-group";
-import { SixTimeFormat } from "./components/six-timepicker/six-time-format";
+import { TimeFormat } from "./utils/time.util";
 import { SixTimepickerChange } from "./components/six-timepicker/six-timepicker";
 export { EmptyPayload } from "./utils/types";
 export { SixDateFormats } from "./components/six-datepicker/six-date-formats";
@@ -33,7 +32,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";
@@ -45,7 +43,7 @@ export { SixSearchFieldChangePayload } from "./components/six-search-field/six-s
 export { SixSelectChangePayload } from "./components/six-select/six-select";
 export { StageType as StageType1 } from "./components/six-stage-indicator/six-stage-indicator";
 export { SixTabHidePayload, SixTabShowPayload } from "./components/six-tab-group/six-tab-group";
-export { SixTimeFormat } from "./components/six-timepicker/six-time-format";
+export { TimeFormat } from "./utils/time.util";
 export { SixTimepickerChange } from "./components/six-timepicker/six-timepicker";
 export namespace Components {
     interface SetAttributes {
@@ -152,11 +150,11 @@ export namespace Components {
         /**
           * Tells the browser to download the linked file as this filename. Only used when `href` is set.
          */
-        "download": string;
+        "download"?: string;
         /**
           * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
          */
-        "href": string;
+        "href"?: string;
         /**
           * Set to true to draw the button in a loading state.
          */
@@ -192,7 +190,7 @@ export namespace Components {
         /**
           * Tells the browser where to open the link. Only used when `href` is set.
          */
-        "target": '_blank' | '_parent' | '_self' | '_top';
+        "target"?: '_blank' | '_parent' | '_self' | '_top';
         /**
           * The button's type.
          */
@@ -214,10 +212,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,11 +221,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur": boolean;
-        /**
-          * The checkbox's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText": string;
         /**
@@ -239,11 +229,11 @@ export namespace Components {
          */
         "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 +245,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>;
-        /**
-          * 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 +270,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>;
         /**
           * Set to true to add a clear button when the input is populated.
          */
@@ -303,7 +281,7 @@ export namespace Components {
         /**
           * The dropdown will close when the user interacts outside of this element (e.g. clicking).
          */
-        "containingElement": HTMLElement;
+        "containingElement"?: HTMLElement;
         /**
           * Define the dateFormat. Valid formats are: 'dd.mm.yyyy' 'yyyy-mm-dd' 'dd-mm-yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd' 'dd.mm.yy' 'yy-mm-dd' 'dd-mm-yy' 'dd/mm/yy' 'yy/mm/dd'
          */
@@ -315,17 +293,13 @@ export namespace Components {
         /**
           * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
          */
-        "defaultDate"?: string | null;
+        "defaultDate"?: string;
         /**
           * If `true` the component is disabled.
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur": boolean;
-        /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText": string;
         /**
@@ -341,7 +315,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;
         /**
@@ -351,11 +329,11 @@ export namespace Components {
         /**
           * The maximum datetime allowed. Value must be a date object
          */
-        "max"?: Date | null;
+        "max"?: Date;
         /**
           * The minimum datetime allowed. Value must be a date object
          */
-        "min"?: Date | null;
+        "min"?: Date;
         /**
           * The input's name attribute.
          */
@@ -367,35 +345,27 @@ export namespace Components {
         /**
           * The placeholder defines what text to be shown on the input element
          */
-        "placeholder"?: string | null;
+        "placeholder"?: string;
         /**
           * The enforced placement of the dropdown panel.
          */
-        "placement": 'top' | 'bottom';
+        "placement"?: 'top' | 'bottom';
         /**
           * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
          */
         "readonly": boolean;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean>;
-        /**
-          * Set to true to make the input a required field.
+          * 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>;
+        "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.
          */
@@ -407,7 +377,7 @@ export namespace Components {
         /**
           * The value of the form field, which accepts a date object.
          */
-        "value"?: Date | null;
+        "value"?: Date;
     }
     /**
      * @since 1.0
@@ -419,6 +389,9 @@ export namespace Components {
           * Set to true to prevent the user from toggling the details.
          */
         "disabled": boolean;
+        /**
+          * Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group'
+         */
         "hasContent": boolean;
         /**
           * Hides the detail body
@@ -429,7 +402,7 @@ export namespace Components {
          */
         "inline": boolean;
         /**
-          * Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the details is open. You can use this in lieu of the show/hide methods.
          */
         "open": boolean;
         /**
@@ -447,7 +420,7 @@ export namespace Components {
         /**
           * The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead.
          */
-        "summaryIcon": string;
+        "summaryIcon"?: string;
         /**
           * The icon's size.
          */
@@ -479,7 +452,7 @@ export namespace Components {
          */
         "noHeader": boolean;
         /**
-          * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the dialog is open. You can use this in lieu of the show/hide methods.
          */
         "open": boolean;
         /**
@@ -510,7 +483,7 @@ export namespace Components {
          */
         "noHeader": boolean;
         /**
-          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the drawer is open. You can use this in lieu of the show/hide methods.
          */
         "open": boolean;
         /**
@@ -543,7 +516,7 @@ export namespace Components {
         /**
           * The dropdown will close when the user interacts outside of this element (e.g. clicking).
          */
-        "containingElement": HTMLElement;
+        "containingElement"?: HTMLElement;
         /**
           * The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this
          */
@@ -573,15 +546,15 @@ export namespace Components {
          */
         "hoist": boolean;
         /**
-          * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods.
          */
         "open": boolean;
         /**
           * Set the options to be shown in the dropdown (alternative to setting the elements via html)
          */
-        "options": SixMenuItemData[] | null;
+        "options": SixMenuItemData[];
         /**
-          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
+          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport.
          */
         "placement": | 'top'
     | 'top-start'
@@ -628,7 +601,7 @@ export namespace Components {
         /**
           * Defines error Code and thus displays the proper error page.
          */
-        "errorCode": number;
+        "errorCode"?: 404 | 403 | 500;
         /**
           * Defines language and thus displays the proper error page in the selected language.
          */
@@ -668,7 +641,7 @@ export namespace Components {
         /**
           * The file size. This number will be divided by 1024 to show the filesize in KB
          */
-        "size": number;
+        "size"?: number;
     }
     /**
      * @since 2.0.0
@@ -678,7 +651,7 @@ export namespace Components {
         /**
           * Accepted MIME-Types.
          */
-        "accept": string;
+        "accept"?: string;
         /**
           * Set to true if file control should be small.
          */
@@ -686,19 +659,19 @@ export namespace Components {
         /**
           * Set when button is disabled.
          */
-        "disabled": boolean;
+        "disabled": false;
         /**
           * Label of the drop area.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Allowed max file size in bytes.
          */
-        "maxFileSize": number | undefined;
+        "maxFileSize"?: number;
         /**
           * More than one file allowed.
          */
-        "multiple": boolean;
+        "multiple": false;
     }
     /**
      * @since 1.0
@@ -706,37 +679,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
@@ -755,7 +697,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * The label's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required": boolean;
         /**
@@ -827,15 +769,15 @@ export namespace Components {
         /**
           * HTML symbol code or entity.
          */
-        "html": string;
+        "html"?: string;
         /**
           * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The name of the icon to draw.
          */
-        "name": string;
+        "name"?: string;
         /**
           * The icon's size.
          */
@@ -863,10 +805,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.
          */
@@ -876,21 +814,9 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur": boolean;
-        /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText": string;
-        /**
-          * Returns the native input's validationMessage
-         */
-        "getValidationMessage": () => Promise<string>;
-        /**
-          * Returns the native input's validity
-         */
-        "getValidity": () => Promise<ValidityState | undefined>;
         /**
           * The input's help text. Alternatively, you can use the help-text slot.
          */
@@ -900,15 +826,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;
         /**
@@ -956,25 +878,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>;
-        /**
-          * 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>;
-        /**
-          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
-         */
-        "setCustomValidity": (message: string) => Promise<void>;
+        "select": () => Promise<void | undefined>;
         /**
           * Sets focus on the input.
          */
@@ -986,7 +896,7 @@ export namespace Components {
         /**
           * Sets the start and end positions of the text selection (0-based).
          */
-        "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>;
+        "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void | undefined>;
         /**
           * The input's size.
          */
@@ -1028,15 +938,15 @@ export namespace Components {
         /**
           * Defines a custom list of items you can iterate through
          */
-        "items": string[];
+        "items"?: string[];
         /**
           * The maximum value allowed to pick.
          */
-        "max": number | string;
+        "max"?: number | string;
         /**
           * The minimum value allowed to pick.
          */
-        "min": number | string;
+        "min"?: number | string;
         /**
           * Defines whether the items should be padded
          */
@@ -1046,7 +956,7 @@ export namespace Components {
          */
         "paddingChar": string;
         /**
-          * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default before is selected
+          * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default, before is selected
          */
         "paddingDirection": ItemPickerPaddingDirection;
         /**
@@ -1092,7 +1002,7 @@ export namespace Components {
         /**
           * Set the number of grid columns
          */
-        "columns": any;
+        "columns"?: number;
     }
     /**
      * @since 1.01
@@ -1119,7 +1029,7 @@ export namespace Components {
          */
         "items": SixMenuItemData1[] | null;
         /**
-          * Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown
+          * Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown
          */
         "itemsShown"?: number;
         /**
@@ -1234,10 +1144,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.
          */
@@ -1247,7 +1153,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;
         /**
@@ -1258,18 +1164,10 @@ 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>;
         /**
           * 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.
          */
@@ -1290,11 +1188,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur": boolean;
-        /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText": string;
         /**
@@ -1302,11 +1196,11 @@ export namespace Components {
          */
         "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;
         /**
@@ -1326,17 +1220,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.
          */
@@ -1400,7 +1286,7 @@ export namespace Components {
         /**
           * The input's placeholder text.
          */
-        "placeholder": string;
+        "placeholder"?: string;
         /**
           * The input's value attribute.
          */
@@ -1420,28 +1306,16 @@ export namespace Components {
           * Set to true to turn the six-select into an autocomplete.
          */
         "autocomplete": boolean;
-        /**
-          * Checks for validity.
-         */
-        "checkValidity": () => Promise<boolean>;
         /**
           * Set to true to add a clear button when the select is populated.
          */
         "clearable": boolean;
-        /**
-          * The default value the select will be reverted to when reset is executed
-         */
-        "defaultValue": string | string[] | undefined;
         /**
           * Set to true to disable the select control.
          */
         "disabled": boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur": boolean;
-        /**
-          * The select's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText": string;
         /**
@@ -1469,11 +1343,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;
         /**
@@ -1505,21 +1379,13 @@ export namespace Components {
          */
         "placeholder": string;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean>;
-        /**
-          * The select's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required": boolean;
         /**
-          * Resets the formcontrol
+          * Sets focus on the select.
          */
-        "reset": () => Promise<void>;
-        /**
-          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
-         */
-        "setCustomValidity": (message: string) => Promise<void>;
+        "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * The select's size.
          */
@@ -1543,7 +1409,7 @@ export namespace Components {
          */
         "hide": () => Promise<void>;
         /**
-          * Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods.
          */
         "open": boolean;
         /**
@@ -1606,11 +1472,14 @@ export namespace Components {
           * Title of item group
          */
         "name": string;
+        /**
+          * Indicates whether the sidebar is shown
+         */
         "open": boolean;
         /**
           * Custom summary icon name.
          */
-        "summaryIcon": string;
+        "summaryIcon"?: string;
         /**
           * A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected.
          */
@@ -1639,10 +1508,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>;
         /**
           * Set to true to draw the switch in a checked state.
          */
@@ -1652,9 +1517,17 @@ 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.
+         */
+        "errorText": string;
+        /**
+          * 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.
          */
@@ -1664,21 +1537,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>;
-        /**
-          * Set to true to make the switch 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 switch.
          */
@@ -1798,20 +1659,12 @@ 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
-         */
-        "errorOnBlur": boolean;
-        /**
-          * The textarea's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText": string;
         /**
@@ -1823,11 +1676,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;
         /**
@@ -1855,17 +1708,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>;
-        /**
-          * 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.
          */
@@ -1877,11 +1722,7 @@ export namespace Components {
         /**
           * Selects all the text in the input.
          */
-        "select": () => Promise<void>;
-        /**
-          * Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
-         */
-        "setCustomValidity": (message: string) => Promise<void>;
+        "select": () => Promise<void | undefined>;
         /**
           * Sets focus on the textarea.
          */
@@ -1893,7 +1734,7 @@ export namespace Components {
         /**
           * Sets the start and end positions of the text selection (0-based).
          */
-        "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>;
+        "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void | undefined>;
         /**
           * The textarea's size.
          */
@@ -1935,7 +1776,7 @@ export namespace Components {
         /**
           * The icon's name.
          */
-        "iconName": any;
+        "iconName"?: string;
         /**
           * The tile's label.
          */
@@ -1954,10 +1795,6 @@ export namespace Components {
      * @status experimental
      */
     interface SixTimepicker {
-        /**
-          * Checks for validity.
-         */
-        "checkValidity": () => Promise<boolean>;
         /**
           * Set to true to add a clear button when the input is populated.
          */
@@ -1969,15 +1806,11 @@ export namespace Components {
         /**
           * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.
          */
-        "defaultTime"?: string | null;
+        "defaultTime"?: string;
         /**
           * If `true` the component is disabled.
          */
         "disabled": boolean;
-        /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur": boolean;
         /**
           * The input's error text. Alternatively, you can use the error-text slot.
          */
@@ -1985,7 +1818,7 @@ export namespace Components {
         /**
           * Define the time format. Valid formats are:  HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms  where HH is the 24 hour format and hh is the 12 hour format  Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm
          */
-        "format": SixTimeFormat;
+        "format": TimeFormat;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
          */
@@ -1995,13 +1828,17 @@ export namespace Components {
          */
         "iconPosition": 'left' | 'right';
         /**
-          * Indicates whether or not the timepicker should be shown as an inline (always open) component
+          * Indicates whether the timepicker should be shown as an inline (always open) component
          */
         "inline": boolean;
         /**
           * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
          */
         "interval": number;
+        /**
+          * 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.
          */
@@ -2011,41 +1848,33 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
+          * Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
          */
         "open": boolean;
         /**
           * The placeholder defines what text to be shown on the input element
          */
-        "placeholder"?: string | null;
+        "placeholder"?: string;
         /**
           * The enforced placement of the dropdown panel.
          */
-        "placement": 'top' | 'bottom';
+        "placement"?: 'top' | 'bottom';
         /**
           * If `true` the user can only select a time via the timepicker but not directly edit the input field.
          */
         "readonly": boolean;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
-         */
-        "reportValidity": () => Promise<boolean>;
-        /**
-          * Set to true to make the input a required field.
+          * 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.
          */
@@ -2057,7 +1886,7 @@ export namespace Components {
         /**
           * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
          */
-        "value"?: string | null;
+        "value": string;
     }
     /**
      * @since 1.0
@@ -2070,7 +1899,7 @@ export namespace Components {
          */
         "content": string;
         /**
-          * Set to true to disable the tooltip so it won't show when triggered.
+          * Set to true to disable the tooltip, so it won't show when triggered.
          */
         "disabled": boolean;
         /**
@@ -2082,11 +1911,11 @@ export namespace Components {
          */
         "hide": () => Promise<void>;
         /**
-          * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods.
          */
         "open": boolean;
         /**
-          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
+          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside the viewport.
          */
         "placement": | 'top'
     | 'top-start'
@@ -2154,10 +1983,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;
@@ -2406,17 +2231,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
@@ -2796,7 +2610,6 @@ declare global {
         "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;
@@ -3014,11 +2827,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur"?: boolean;
-        /**
-          * The checkbox's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText"?: string;
         /**
@@ -3026,11 +2835,11 @@ declare namespace LocalJSX {
          */
         "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;
         /**
@@ -3050,7 +2859,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;
         /**
@@ -3090,17 +2899,13 @@ declare namespace LocalJSX {
         /**
           * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
          */
-        "defaultDate"?: string | null;
+        "defaultDate"?: string;
         /**
           * If `true` the component is disabled.
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur"?: boolean;
-        /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText"?: string;
         /**
@@ -3116,7 +2921,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;
         /**
@@ -3126,11 +2935,11 @@ declare namespace LocalJSX {
         /**
           * The maximum datetime allowed. Value must be a date object
          */
-        "max"?: Date | null;
+        "max"?: Date;
         /**
           * The minimum datetime allowed. Value must be a date object
          */
-        "min"?: Date | null;
+        "min"?: Date;
         /**
           * The input's name attribute.
          */
@@ -3154,7 +2963,7 @@ declare namespace LocalJSX {
         /**
           * The placeholder defines what text to be shown on the input element
          */
-        "placeholder"?: string | null;
+        "placeholder"?: string;
         /**
           * The enforced placement of the dropdown panel.
          */
@@ -3164,7 +2973,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;
         /**
@@ -3178,7 +2987,7 @@ declare namespace LocalJSX {
         /**
           * The value of the form field, which accepts a date object.
          */
-        "value"?: Date | null;
+        "value"?: Date;
     }
     /**
      * @since 1.0
@@ -3190,6 +2999,9 @@ declare namespace LocalJSX {
           * Set to true to prevent the user from toggling the details.
          */
         "disabled"?: boolean;
+        /**
+          * Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group'
+         */
         "hasContent"?: boolean;
         /**
           * Set to true when you want to use six-details inline e.g. in a sidebar
@@ -3212,7 +3024,7 @@ declare namespace LocalJSX {
          */
         "onSix-details-show"?: (event: SixDetailsCustomEvent<EmptyPayload>) => void;
         /**
-          * Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the details is open. You can use this in lieu of the show/hide methods.
          */
         "open"?: boolean;
         /**
@@ -3278,7 +3090,7 @@ declare namespace LocalJSX {
          */
         "onSix-dialog-show"?: (event: SixDialogCustomEvent<EmptyPayload>) => void;
         /**
-          * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the dialog is open. You can use this in lieu of the show/hide methods.
          */
         "open"?: boolean;
     }
@@ -3325,7 +3137,7 @@ declare namespace LocalJSX {
          */
         "onSix-drawer-show"?: (event: SixDrawerCustomEvent<EmptyPayload>) => void;
         /**
-          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the drawer is open. You can use this in lieu of the show/hide methods.
          */
         "open"?: boolean;
         /**
@@ -3408,15 +3220,15 @@ declare namespace LocalJSX {
          */
         "onSix-dropdown-show"?: (event: SixDropdownCustomEvent<EmptyPayload>) => void;
         /**
-          * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods.
          */
         "open"?: boolean;
         /**
           * Set the options to be shown in the dropdown (alternative to setting the elements via html)
          */
-        "options"?: SixMenuItemData[] | null;
+        "options"?: SixMenuItemData[];
         /**
-          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
+          * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport.
          */
         "placement"?: | 'top'
     | 'top-start'
@@ -3455,7 +3267,7 @@ declare namespace LocalJSX {
         /**
           * Defines error Code and thus displays the proper error page.
          */
-        "errorCode"?: number;
+        "errorCode"?: 404 | 403 | 500;
         /**
           * Defines language and thus displays the proper error page in the selected language.
          */
@@ -3521,7 +3333,7 @@ declare namespace LocalJSX {
         /**
           * Set when button is disabled.
          */
-        "disabled"?: boolean;
+        "disabled"?: false;
         /**
           * Label of the drop area.
          */
@@ -3529,11 +3341,11 @@ declare namespace LocalJSX {
         /**
           * Allowed max file size in bytes.
          */
-        "maxFileSize"?: number | undefined;
+        "maxFileSize"?: number;
         /**
           * More than one file allowed.
          */
-        "multiple"?: boolean;
+        "multiple"?: false;
         /**
           * Triggers when an uploaded file doesn't match MIME type or max file size.
          */
@@ -3549,29 +3361,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
@@ -3590,7 +3379,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * The label's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -3723,11 +3512,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur"?: boolean;
-        /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText"?: string;
         /**
@@ -3739,11 +3524,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;
         /**
@@ -3807,7 +3592,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;
         /**
@@ -3877,7 +3662,7 @@ declare namespace LocalJSX {
          */
         "paddingChar"?: string;
         /**
-          * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default before is selected
+          * Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default, before is selected
          */
         "paddingDirection"?: ItemPickerPaddingDirection;
         /**
@@ -3927,7 +3712,7 @@ declare namespace LocalJSX {
         /**
           * Set the number of grid columns
          */
-        "columns"?: any;
+        "columns"?: number;
     }
     /**
      * @since 1.01
@@ -3954,7 +3739,7 @@ declare namespace LocalJSX {
          */
         "items"?: SixMenuItemData1[] | null;
         /**
-          * Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown
+          * Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown
          */
         "itemsShown"?: number;
         /**
@@ -4066,7 +3851,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;
         /**
@@ -4101,11 +3886,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur"?: boolean;
-        /**
-          * The input's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText"?: string;
         /**
@@ -4113,11 +3894,11 @@ declare namespace LocalJSX {
          */
         "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;
         /**
@@ -4145,7 +3926,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;
         /**
@@ -4239,20 +4020,12 @@ 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[] | undefined;
         /**
           * Set to true to disable the select control.
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur"?: boolean;
-        /**
-          * The select's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText"?: string;
         /**
@@ -4280,11 +4053,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;
         /**
@@ -4328,7 +4101,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The select's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4370,7 +4143,7 @@ declare namespace LocalJSX {
          */
         "onSix-sidebar-show"?: (event: SixSidebarCustomEvent<EmptyPayload>) => void;
         /**
-          * Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods.
          */
         "open"?: boolean;
         /**
@@ -4417,6 +4190,9 @@ declare namespace LocalJSX {
           * Title of item group
          */
         "name"?: string;
+        /**
+          * Indicates whether the sidebar is shown
+         */
         "open"?: boolean;
         /**
           * Custom summary icon name.
@@ -4459,9 +4235,17 @@ 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;
+        /**
+          * 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.
          */
@@ -4479,7 +4263,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;
         /**
@@ -4606,11 +4390,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur"?: boolean;
-        /**
-          * The textarea's error text. Alternatively, you can use the error-text slot.
+          * The error message shown, if `invalid` is set to true.
          */
         "errorText"?: string;
         /**
@@ -4622,11 +4402,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;
         /**
@@ -4666,7 +4446,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * The textarea's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4714,7 +4494,7 @@ declare namespace LocalJSX {
         /**
           * The icon's name.
          */
-        "iconName"?: any;
+        "iconName"?: string;
         /**
           * The tile's label.
          */
@@ -4748,15 +4528,11 @@ declare namespace LocalJSX {
         /**
           * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.
          */
-        "defaultTime"?: string | null;
+        "defaultTime"?: string;
         /**
           * If `true` the component is disabled.
          */
         "disabled"?: boolean;
-        /**
-          * Set to display the error text on blur and not when typing
-         */
-        "errorOnBlur"?: boolean;
         /**
           * The input's error text. Alternatively, you can use the error-text slot.
          */
@@ -4764,7 +4540,7 @@ declare namespace LocalJSX {
         /**
           * Define the time format. Valid formats are:  HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms  where HH is the 24 hour format and hh is the 12 hour format  Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm
          */
-        "format"?: SixTimeFormat;
+        "format"?: TimeFormat;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
          */
@@ -4774,13 +4550,17 @@ declare namespace LocalJSX {
          */
         "iconPosition"?: 'left' | 'right';
         /**
-          * Indicates whether or not the timepicker should be shown as an inline (always open) component
+          * Indicates whether the timepicker should be shown as an inline (always open) component
          */
         "inline"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
          */
         "interval"?: number;
+        /**
+          * 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.
          */
@@ -4802,13 +4582,13 @@ declare namespace LocalJSX {
          */
         "onSix-timepicker-clear"?: (event: SixTimepickerCustomEvent<EmptyPayload>) => void;
         /**
-          * Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
+          * Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
          */
         "open"?: boolean;
         /**
           * The placeholder defines what text to be shown on the input element
          */
-        "placeholder"?: string | null;
+        "placeholder"?: string;
         /**
           * The enforced placement of the dropdown panel.
          */
@@ -4818,7 +4598,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;
         /**
@@ -4836,7 +4616,7 @@ declare namespace LocalJSX {
         /**
           * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
          */
-        "value"?: string | null;
+        "value"?: string;
     }
     /**
      * @since 1.0
@@ -4849,7 +4629,7 @@ declare namespace LocalJSX {
          */
         "content"?: string;
         /**
-          * Set to true to disable the tooltip so it won't show when triggered.
+          * Set to true to disable the tooltip, so it won't show when triggered.
          */
         "disabled"?: boolean;
         /**
@@ -4873,11 +4653,11 @@ declare namespace LocalJSX {
          */
         "onSix-tooltip-show"?: (event: SixTooltipCustomEvent<EmptyPayload>) => void;
         /**
-          * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods.
          */
         "open"?: boolean;
         /**
-          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
+          * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside the viewport.
          */
         "placement"?: | 'top'
     | 'top-start'
@@ -4918,7 +4698,6 @@ declare namespace LocalJSX {
         "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;
@@ -5046,12 +4825,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