@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.2

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,27 +245,15 @@ 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.
          */
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
-          * The checkbox's value attribute.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
         "value": string;
     }
@@ -288,10 +266,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 +277,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 +289,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 +311,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 +325,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 +341,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 +373,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 +385,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 +398,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 +416,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 +448,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 +479,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 +512,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 +542,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 +597,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 +637,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 +647,7 @@ export namespace Components {
         /**
           * Accepted MIME-Types.
          */
-        "accept": string;
+        "accept"?: string;
         /**
           * Set to true if file control should be small.
          */
@@ -686,19 +655,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 +675,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 +693,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 +765,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.
          */
@@ -858,15 +796,11 @@ export namespace Components {
         /**
           * The input's autocorrect attribute.
          */
-        "autocorrect": string;
+        "autocorrect": 'on' | 'off';
         /**
           * 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 +810,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>;
         /**
           * The input's help text. Alternatively, you can use the help-text slot.
          */
@@ -898,17 +820,13 @@ export namespace Components {
         /**
           * The input's inputmode attribute.
          */
-        "inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        "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;
         /**
@@ -918,19 +836,19 @@ export namespace Components {
         /**
           * The input's maximum value.
          */
-        "max": number;
+        "max"?: number;
         /**
           * The maximum length of input that will be considered valid.
          */
-        "maxlength": number;
+        "maxlength"?: number;
         /**
           * The input's minimum value.
          */
-        "min": number;
+        "min"?: number;
         /**
           * The minimum length of input that will be considered valid.
          */
-        "minlength": number;
+        "minlength"?: number;
         /**
           * The input's name attribute.
          */
@@ -938,7 +856,7 @@ export namespace Components {
         /**
           * A pattern to validate input against.
          */
-        "pattern": string;
+        "pattern"?: string;
         /**
           * Set to true to draw a pill-style input with rounded edges.
          */
@@ -946,7 +864,7 @@ export namespace Components {
         /**
           * The input's placeholder text.
          */
-        "placeholder": string;
+        "placeholder"?: string;
         /**
           * Set to true to make the input readonly.
          */
@@ -956,25 +874,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 +892,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.
          */
@@ -998,7 +904,7 @@ export namespace Components {
         /**
           * The input's step attribute.
          */
-        "step": number;
+        "step"?: number;
         /**
           * Set to true to add a password toggle button for password inputs.
          */
@@ -1028,15 +934,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 +952,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 +998,7 @@ export namespace Components {
         /**
           * Set the number of grid columns
          */
-        "columns": any;
+        "columns"?: number;
     }
     /**
      * @since 1.01
@@ -1119,7 +1025,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 +1140,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 +1149,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 +1160,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>;
-        /**
-          * 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 +1180,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 +1188,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 +1212,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 +1278,7 @@ export namespace Components {
         /**
           * The input's placeholder text.
          */
-        "placeholder": string;
+        "placeholder"?: string;
         /**
           * The input's value attribute.
          */
@@ -1420,28 +1298,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;
         /**
@@ -1455,7 +1321,7 @@ export namespace Components {
         /**
           * The filter's placeholder text.
          */
-        "filterPlaceholder": string;
+        "filterPlaceholder"?: string;
         /**
           * The select's help text. Alternatively, you can use the help-text slot.
          */
@@ -1469,11 +1335,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 +1371,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 +1401,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 +1464,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 +1500,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 +1509,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 +1529,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.
          */
@@ -1793,25 +1646,17 @@ export namespace Components {
         /**
           * The textarea's autocorrect attribute.
          */
-        "autocorrect": string;
+        "autocorrect": 'on' | 'off';
         /**
           * 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;
         /**
@@ -1821,23 +1666,23 @@ export namespace Components {
         /**
           * The textarea's inputmode attribute.
          */
-        "inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        "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;
         /**
           * The maximum length of input that will be considered valid.
          */
-        "maxlength": number;
+        "maxlength"?: number;
         /**
           * The minimum length of input that will be considered valid.
          */
-        "minlength": number;
+        "minlength"?: number;
         /**
           * The textarea's name attribute.
          */
@@ -1845,7 +1690,7 @@ export namespace Components {
         /**
           * The textarea's placeholder text.
          */
-        "placeholder": string;
+        "placeholder"?: string;
         /**
           * Set to true for a readonly textarea.
          */
@@ -1855,17 +1700,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 +1714,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 +1726,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 +1768,7 @@ export namespace Components {
         /**
           * The icon's name.
          */
-        "iconName": any;
+        "iconName"?: string;
         /**
           * The tile's label.
          */
@@ -1954,10 +1787,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 +1798,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 +1810,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 +1820,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 +1840,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 +1878,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 +1891,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 +1903,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 +1975,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 +2223,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 +2602,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 +2819,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 +2827,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,11 +2851,11 @@ 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;
         /**
-          * The checkbox's value attribute.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
         "value"?: string;
     }
@@ -3090,17 +2891,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 +2913,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 +2927,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 +2955,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 +2965,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 +2979,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 +2991,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 +3016,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 +3082,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 +3129,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 +3212,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 +3259,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 +3325,7 @@ declare namespace LocalJSX {
         /**
           * Set when button is disabled.
          */
-        "disabled"?: boolean;
+        "disabled"?: false;
         /**
           * Label of the drop area.
          */
@@ -3529,11 +3333,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 +3353,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 +3371,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * The label's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -3709,7 +3490,7 @@ declare namespace LocalJSX {
         /**
           * The input's autocorrect attribute.
          */
-        "autocorrect"?: string;
+        "autocorrect"?: 'on' | 'off';
         /**
           * The input's autofocus attribute.
          */
@@ -3723,11 +3504,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 +3516,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;
         /**
@@ -3790,10 +3567,6 @@ declare namespace LocalJSX {
           * Emitted when the control receives input. Access the new value via event.target.value.
          */
         "onSix-input-input"?: (event: SixInputCustomEvent<EmptyPayload>) => void;
-        /**
-          * Emitted whenever the value changes. Access the new value via event.target.value. six-input-value-change will emit whenever the value changes. So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data, but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter or leaves the input field after entering some data.
-         */
-        "onSix-input-value-change"?: (event: SixInputCustomEvent<EmptyPayload>) => void;
         /**
           * A pattern to validate input against.
          */
@@ -3811,7 +3584,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;
         /**
@@ -3881,7 +3654,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;
         /**
@@ -3931,7 +3704,7 @@ declare namespace LocalJSX {
         /**
           * Set the number of grid columns
          */
-        "columns"?: any;
+        "columns"?: number;
     }
     /**
      * @since 1.01
@@ -3958,7 +3731,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;
         /**
@@ -4070,7 +3843,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;
         /**
@@ -4105,11 +3878,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;
         /**
@@ -4117,11 +3886,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;
         /**
@@ -4149,7 +3918,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;
         /**
@@ -4243,20 +4012,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;
         /**
@@ -4284,11 +4045,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;
         /**
@@ -4332,7 +4093,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The select's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4374,7 +4135,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;
         /**
@@ -4421,6 +4182,9 @@ declare namespace LocalJSX {
           * Title of item group
          */
         "name"?: string;
+        /**
+          * Indicates whether the sidebar is shown
+         */
         "open"?: boolean;
         /**
           * Custom summary icon name.
@@ -4463,9 +4227,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.
          */
@@ -4483,7 +4255,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;
         /**
@@ -4600,7 +4372,7 @@ declare namespace LocalJSX {
         /**
           * The textarea's autocorrect attribute.
          */
-        "autocorrect"?: string;
+        "autocorrect"?: 'on' | 'off';
         /**
           * The textarea's autofocus attribute.
          */
@@ -4610,11 +4382,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;
         /**
@@ -4626,11 +4394,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;
         /**
@@ -4661,10 +4429,6 @@ declare namespace LocalJSX {
           * Emitted when the control receives input. Access the new value via event.target.value.
          */
         "onSix-textarea-input"?: (event: SixTextareaCustomEvent<EmptyPayload>) => void;
-        /**
-          * Emitted whenever the value changes. Access the new value via event.target.value. six-textarea-value-change will emit whenever the value changes. So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data, but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter or leaves the textarea field after entering some data.
-         */
-        "onSix-textarea-value-change"?: (event: SixTextareaCustomEvent<EmptyPayload>) => void;
         /**
           * The textarea's placeholder text.
          */
@@ -4674,7 +4438,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * The textarea's required attribute.
+          * Set to true to show an asterisk beneath the label.
          */
         "required"?: boolean;
         /**
@@ -4722,7 +4486,7 @@ declare namespace LocalJSX {
         /**
           * The icon's name.
          */
-        "iconName"?: any;
+        "iconName"?: string;
         /**
           * The tile's label.
          */
@@ -4756,15 +4520,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.
          */
@@ -4772,7 +4532,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`.
          */
@@ -4782,13 +4542,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.
          */
@@ -4810,13 +4574,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.
          */
@@ -4826,7 +4590,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;
         /**
@@ -4844,7 +4608,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
@@ -4857,7 +4621,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;
         /**
@@ -4881,11 +4645,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'
@@ -4926,7 +4690,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;
@@ -5054,12 +4817,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