@six-group/ui-library 0.0.0-insider.1220003 → 0.0.0-insider.14a7695

package/dist/types/components.d.ts

@@ -7,13 +7,16 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AlertType } from "./components/six-alert/six-alert";
 import { EmptyPayload } from "./utils/types";
+import { Language } from "./utils/error-messages";
 import { SixDateFormats } from "./components/six-datepicker/six-date-formats";
 import { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker";
+import { SixDialogRequestClose } from "./components/six-dialog/six-dialog";
+import { SixDrawerRequestClose } from "./components/six-drawer/six-drawer";
 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 { SixHeaderAppSwitcherSelectPayload, SixHeaderProfileSelectPayload, SixHeaderSearchFieldToggle } from "./components/six-header/six-header";
+import { IconLibrary } from "./utils/icon";
 import { SelectionRange, SelectionRangeDirection } from "./components/six-input/six-input";
 import { ItemPickerPaddingDirection, ItemPickerType } from "./components/six-item-picker/types";
 import { SixItemPickerChangePayload } from "./components/six-item-picker/six-item-picker";
@@ -28,13 +31,16 @@ import { TimeFormat } from "./utils/time.util";
 import { SixTimepickerChange } from "./components/six-timepicker/six-timepicker";
 export { AlertType } from "./components/six-alert/six-alert";
 export { EmptyPayload } from "./utils/types";
+export { Language } from "./utils/error-messages";
 export { SixDateFormats } from "./components/six-datepicker/six-date-formats";
 export { SixDatepickerSelectPayload } from "./components/six-datepicker/six-datepicker";
+export { SixDialogRequestClose } from "./components/six-dialog/six-dialog";
+export { SixDrawerRequestClose } from "./components/six-drawer/six-drawer";
 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 { SixHeaderAppSwitcherSelectPayload, SixHeaderProfileSelectPayload, SixHeaderSearchFieldToggle } from "./components/six-header/six-header";
+export { IconLibrary } from "./utils/icon";
 export { SelectionRange, SelectionRangeDirection } from "./components/six-input/six-input";
 export { ItemPickerPaddingDirection, ItemPickerType } from "./components/six-item-picker/types";
 export { SixItemPickerChangePayload } from "./components/six-item-picker/six-item-picker";
@@ -56,10 +62,12 @@ export namespace Components {
     interface SixAlert {
         /**
           * Set to true to make the alert closable.
+          * @default false
          */
         "closable": boolean;
         /**
           * The length of time, in milliseconds, the alert will show before closing itself. If the user hovers over the toast alert, the timer will pause. On leaving the element with the mouse, the timer resets.
+          * @default Infinity
          */
         "duration": number;
         /**
@@ -68,6 +76,7 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
@@ -81,6 +90,7 @@ export namespace Components {
         "toast": (adjustPosition?: boolean) => Promise<void>;
         /**
           * The type of alert.
+          * @default 'primary'
          */
         "type": AlertType;
     }
@@ -92,18 +102,22 @@ export namespace Components {
     interface SixAvatar {
         /**
           * Alternative text for the image.
+          * @default ''
          */
         "alt": string;
         /**
           * The image source to use for the avatar.
+          * @default ''
          */
         "image": string;
         /**
           * Initials to use as a fallback when no image is available (1-2 characters max recommended).
+          * @default ''
          */
         "initials": string;
         /**
           * The shape of the avatar.
+          * @default 'circle'
          */
         "shape": 'circle' | 'square' | 'rounded';
     }
@@ -115,17 +129,57 @@ export namespace Components {
     interface SixBadge {
         /**
           * Set to true to draw a pill-style badge with rounded edges.
+          * @default false
          */
         "pill": boolean;
         /**
           * Set to true to make the badge pulsate to draw attention.
+          * @default false
          */
         "pulse": boolean;
         /**
           * The badge's type.
+          * @default 'primary'
          */
         "type": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action';
     }
+    /**
+     * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+     * @since 5.0
+     * @status beta
+     */
+    interface SixBreadcrumbs {
+        /**
+          * Defines an icon as a separator without having to place a slot *
+          * @default ''
+         */
+        "separatorIcon": string;
+    }
+    /**
+     * Breadcrumb items are used inside breadcrumbs to represent different links.
+     * @since 5.0
+     * @status beta
+     */
+    interface SixBreadcrumbsItem {
+        /**
+          * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+         */
+        "href"?: string;
+        /**
+          * Set to true to readonly the breadcrumb item.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * The breadcrumbs item size.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Tells the browser where to open the link. Only used when `href` is set.
+         */
+        "target"?: '_blank' | '_parent' | '_self' | '_top';
+    }
     /**
      * @since 1.0
      * @status stable
@@ -134,14 +188,17 @@ export namespace Components {
     interface SixButton {
         /**
           * Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
+          * @default false
          */
         "caret": boolean;
         /**
           * Set to true to draw a circle button.
+          * @default false
          */
         "circle": boolean;
         /**
           * Set to true to disable the button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -154,14 +211,17 @@ export namespace Components {
         "href"?: string;
         /**
           * Set to true to draw the button in a loading state.
+          * @default false
          */
         "loading": boolean;
         /**
           * An optional name for the button. Ignored when `href` is set.
+          * @default ''
          */
         "name": string;
         /**
           * Set to true to draw a pill-style button with rounded edges.
+          * @default false
          */
         "pill": boolean;
         /**
@@ -170,6 +230,7 @@ export namespace Components {
         "removeFocus": () => Promise<void>;
         /**
           * Indicates if activating the button should reset the form.
+          * @default false
          */
         "reset": boolean;
         /**
@@ -178,10 +239,12 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * The button's size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * Indicates if activating the button should submit the form. Ignored when `href` is set.
+          * @default false
          */
         "submit": boolean;
         /**
@@ -190,6 +253,7 @@ export namespace Components {
         "target"?: '_blank' | '_parent' | '_self' | '_top';
         /**
           * The button's type.
+          * @default 'primary'
          */
         "type": | 'secondary'
     | 'primary'
@@ -201,6 +265,7 @@ export namespace Components {
     | 'action-outline';
         /**
           * An optional value for the button. Ignored when `href` is set.
+          * @default ''
          */
         "value": string;
     }
@@ -218,14 +283,17 @@ export namespace Components {
     interface SixCheckbox {
         /**
           * Set to true to draw the checkbox in a checked state.
+          * @default false
          */
         "checked": boolean;
         /**
           * Set to true to disable the checkbox.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -234,18 +302,22 @@ export namespace Components {
         "errorTextCount"?: number;
         /**
           * Set to true to draw the checkbox in an indeterminate state.
+          * @default false
          */
         "indeterminate": boolean;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label": string;
         /**
           * The checkbox's name attribute.
+          * @default ''
          */
         "name": string;
         /**
@@ -254,6 +326,7 @@ export namespace Components {
         "removeFocus": () => Promise<void>;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
@@ -262,24 +335,125 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * 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>`.
+          * @default 'on'
          */
         "value": string;
     }
+    /**
+     * A date picker component that allows users to select dates via a calendar popup or direct input.
+     * @since 5.0
+     * @status beta
+     */
+    interface SixDate {
+        /**
+          * Callback to determine which dates in the picker should be selectable.
+          * @default () => true
+         */
+        "allowedDates": (date: string) => boolean;
+        /**
+          * Set to true to add a clear button when the input is populated.
+          * @default false
+         */
+        "clearable": boolean;
+        /**
+          * Defines the format pattern for displaying dates and how dates can be entered via keyboard.  The parser accepts flexible input that doesn't strictly match the format pattern. Input with missing leading zeros or incomplete years will be automatically normalized. For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and "1.1.225" becomes "01.01.0225".  Defaults to "dd.MM.yyyy".  Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)  Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024"
+          * @default 'dd.MM.yyyy'
+         */
+        "dateFormat": string;
+        /**
+          * If `true` the component is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The error message shown, if `invalid` is set to true.
+          * @default ''
+         */
+        "errorText": string | string[];
+        /**
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
+         */
+        "errorTextCount"?: number;
+        /**
+          * The input's help text. Alternatively, you can use the help-text slot.
+          * @default ''
+         */
+        "helpText": string;
+        /**
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * The label text.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * The language used to render the weekdays and months.
+          * @default 'en'
+         */
+        "language": Language;
+        /**
+          * The maximum allowed selectable date in ISO format (yyyy-MM-dd). Dates after this value will be disabled in the date picker. Example: '2025-01-01'
+         */
+        "max"?: string;
+        /**
+          * The minimum allowed selectable date in ISO format (yyyy-MM-dd). Dates before this value will be disabled in the date picker. Example: '2024-01-01'
+         */
+        "min"?: string;
+        /**
+          * The input's name attribute.
+          * @default ''
+         */
+        "name": string;
+        /**
+          * The placeholder defines what text to be shown on the input element
+         */
+        "placeholder"?: string;
+        /**
+          * If `true` the user can only select a date via the component in the popup but not directly edit the input field.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Set to true to show an asterisk beneath the label.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the input.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * The size of the date input field.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'.  When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML <input type="date">.  The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format.
+          * @default ''
+         */
+        "value": string | '';
+    }
     /**
      * @since 1.0
-     * @status stable
+     * @status deprecated. Use six-date instead.
      */
     interface SixDatepicker {
         /**
           * Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04'  Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+          * @default () => true
          */
         "allowedDates": (date: Date) => boolean;
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable": boolean;
         /**
           * Closes the datepicker dropdown after selection
+          * @default this.type === 'date'
          */
         "closeOnSelect": boolean;
         /**
@@ -288,10 +462,12 @@ export namespace Components {
         "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'
+          * @default SixDateFormats.DDMMYYY_DOT
          */
         "dateFormat": SixDateFormats;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce": number;
         /**
@@ -300,10 +476,12 @@ export namespace Components {
         "defaultDate"?: string;
         /**
           * If `true` the component is disabled.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -312,26 +490,32 @@ export namespace Components {
         "errorTextCount"?: number;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist": boolean;
         /**
           * Set the position of the icon
+          * @default 'left'
          */
         "iconPosition": 'left' | 'right';
         /**
           * Indicates whether or not the calendar should be shown as an inline (always open) component
+          * @default false
          */
         "inline": boolean;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label": string;
         /**
           * The language used to render the weekdays and months.
+          * @default 'en'
          */
         "locale": 'en' | 'de' | 'fr' | 'it' | 'es';
         /**
@@ -344,10 +528,12 @@ export namespace Components {
         "min"?: Date;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name": string;
         /**
           * Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
@@ -360,10 +546,12 @@ export namespace Components {
         "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.
+          * @default false
          */
         "readonly": boolean;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
@@ -376,10 +564,12 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * Datepicker size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * Set the type.
+          * @default 'date'
          */
         "type": 'date' | 'date-time';
         /**
@@ -395,10 +585,12 @@ export namespace Components {
     interface SixDetails {
         /**
           * Set to true to prevent the user from toggling the details.
+          * @default false
          */
         "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'
+          * @default true
          */
         "hasContent": boolean;
         /**
@@ -407,14 +599,17 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Set to true when you want to use six-details inline e.g. in a sidebar
+          * @default false
          */
         "inline": boolean;
         /**
           * Indicates whether the details is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
           * Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children
+          * @default false
          */
         "selectableEmpty": boolean;
         /**
@@ -423,6 +618,7 @@ export namespace Components {
         "show": () => Promise<void>;
         /**
           * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead.
+          * @default ''
          */
         "summary": string;
         /**
@@ -431,6 +627,7 @@ export namespace Components {
         "summaryIcon"?: string;
         /**
           * The icon's size.
+          * @default 'inherit'
          */
         "summaryIconSize": | 'inherit'
     | 'xSmall'
@@ -453,14 +650,17 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+          * @default ''
          */
         "label": string;
         /**
           * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.
+          * @default false
          */
         "noHeader": boolean;
         /**
           * Indicates whether the dialog is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
@@ -476,6 +676,7 @@ export namespace Components {
     interface SixDrawer {
         /**
           * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
+          * @default false
          */
         "contained": boolean;
         /**
@@ -484,18 +685,22 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+          * @default ''
          */
         "label": string;
         /**
           * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
+          * @default false
          */
         "noHeader": boolean;
         /**
           * Indicates whether the drawer is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
           * The direction from which the drawer will open.
+          * @default 'right'
          */
         "placement": 'top' | 'right' | 'bottom' | 'left';
         /**
@@ -511,14 +716,17 @@ export namespace Components {
     interface SixDropdown {
         /**
           * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+          * @default false
          */
         "asyncFilter": boolean;
         /**
           * By default the search field will be focused when opening a dropdown with filtering enabled.
+          * @default true
          */
         "autofocusFilter": boolean;
         /**
           * Determines whether the dropdown should hide when a menu item is selected.
+          * @default true
          */
         "closeOnSelect": boolean;
         /**
@@ -527,22 +735,27 @@ export namespace Components {
         "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
+          * @default false
          */
         "disableHideOnEnterAndSpace": boolean;
         /**
           * The distance in pixels from which to offset the panel away from its trigger.
+          * @default 4
          */
         "distance": number;
         /**
           * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead
+          * @default false
          */
         "filter": boolean;
         /**
           * The debounce for the filter callbacks.
+          * @default 0
          */
         "filterDebounce": number;
         /**
           * The filter's placeholder text.
+          * @default 'Filter...'
          */
         "filterPlaceholder": string;
         /**
@@ -551,22 +764,27 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist": boolean;
         /**
           * Determines if the dropdown panel's width should match the width of the trigger element.  If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width.
+          * @default false
          */
         "matchTriggerWidth": boolean;
         /**
           * Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
           * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+          * @default []
          */
         "options": SixMenuItemData[];
         /**
           * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport.
+          * @default 'bottom-start'
          */
         "placement": | 'top'
     | 'top-start'
@@ -580,21 +798,18 @@ export namespace Components {
     | 'left'
     | 'left-start'
     | 'left-end';
-        /**
-          * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu is activated.
-          * @deprecated : use the property `matchTriggerWidth` instead.
-         */
-        "reposition": () => Promise<void>;
         /**
           * Shows the dropdown panel
          */
         "show": () => Promise<void>;
         /**
           * The distance in pixels from which to offset the panel along its trigger.
+          * @default 0
          */
         "skidding": number;
         /**
           * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+          * @default false
          */
         "virtualScroll": boolean;
     }
@@ -623,6 +838,7 @@ export namespace Components {
         "errorCode"?: 404 | 403 | 500;
         /**
           * Defines language and thus displays the proper error page in the selected language.
+          * @default 'en'
          */
         "language": 'en' | 'de';
     }
@@ -639,22 +855,27 @@ export namespace Components {
     interface SixFileListItem {
         /**
           * The date when the file was uploaded
+          * @default ''
          */
         "date": string;
         /**
           * An id to clearly identify the file
+          * @default ''
          */
         "identifier": string;
         /**
           * The filename
+          * @default ''
          */
         "name": string;
         /**
           * Set to true if you don't want to allow to delete this file
+          * @default false
          */
         "nodelete": boolean;
         /**
           * Set to true if you don't want to allow to download this file
+          * @default false
          */
         "nodownload": boolean;
         /**
@@ -673,18 +894,22 @@ export namespace Components {
         "accept"?: string;
         /**
           * Set to true if file control should be small.
+          * @default false
          */
         "compact": boolean;
         /**
           * Set when button is disabled.
+          * @default false
          */
         "disabled": false;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
@@ -697,10 +922,12 @@ export namespace Components {
         "maxFileSize"?: number;
         /**
           * More than one file allowed.
+          * @default false
          */
         "multiple": false;
         /**
           * Set to true to draw the control in a loading state.
+          * @default false
          */
         "uploading": boolean;
     }
@@ -717,22 +944,27 @@ export namespace Components {
     interface SixGroupLabel {
         /**
           * Set to true to disable the label.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The wrapper label's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText": string;
         /**
           * The wrapper label's label. Alternatively, you can use the label slot.
+          * @default ''
          */
         "label": string;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
           * The label's size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
     }
@@ -742,75 +974,73 @@ export namespace Components {
      */
     interface SixHeader {
         /**
-          * Set whether the logo should be clickable
-          * @deprecated Use six-header `custom` property with `six-logo` instead
-         */
-        "clickableLogo": boolean;
-        /**
-          * Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots are ignored.  Use `six-header-item`, `six-header-dropdown-item` and `six-header-menu-button` to structure the content.
-          * @since 4.2.7
-          * @status beta
-         */
-        "custom": boolean;
-        /**
-          * Get open state for search
-          * @deprecated Use six-header `custom` property instead
-         */
-        "getIsSearchOpen": () => Promise<boolean>;
-        /**
-          * Set whether the hamburger menu should be visible or not
-          * @deprecated Use six-header `custom` property instead
-         */
-        "hideHamburgerMenu": boolean;
-        /**
-          * The displayed logo. Either six or bme. Defaults to six.
-          * @deprecated Use six-header `custom` property with `six-logo` instead
-         */
-        "logo": 'six' | 'bme';
-        /**
-          * Set the hamburger menu icon to open or closed state
-          * @deprecated Use six-header `custom` property instead
-         */
-        "openHamburgerMenu": boolean;
-        /**
-          * Set the header search to be in an open or closed state.  If `custom` is `true`, focuses the first `six-input` found in the search slot.
+          * Set the header search input to be in an open or closed state.  Focuses the first `six-input` found in the search slot.
+          * @default false
          */
         "openSearch": boolean;
-        /**
-          * Sets open state for search
-          * @deprecated Use six-header `custom` property instead
-         */
-        "setSearchOpenState": (openState: boolean) => Promise<void>;
         /**
           * Indicates if content should be shifted down when search field is visible.
+          * @default false
          */
         "shiftContent": boolean;
     }
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface SixHeaderDropdownItem {
+        /**
+          * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead
+          * @default false
+         */
+        "filter": boolean;
+        /**
+          * The filter's placeholder text.
+          * @default 'Filter...'
+         */
+        "filterPlaceholder": string;
     }
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface SixHeaderItem {
         /**
           * Indicates whether the item is styled as active. When set to `true`, a border is displayed below the trigger element.  Use <code>six-header-dropdown-item</code> to automatically set the active state for dropdowns.
+          * @default false
          */
         "active": boolean;
     }
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface SixHeaderMenuButton {
         /**
-          * The icon of the menu button.
+          * Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
+          * @default false
          */
-        "icon": string;
+        "caret": boolean;
+        /**
+          * Set to true to disable the button.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Set to true to draw the button in a loading state.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * Indicates if activating the button should reset the form.
+          * @default false
+         */
+        "reset": boolean;
+        /**
+          * Indicates if activating the button should submit the form. Ignored when `href` is set.
+          * @default false
+         */
+        "submit": boolean;
     }
     /**
      * @since 1.0
@@ -819,10 +1049,16 @@ export namespace Components {
     interface SixIcon {
         /**
           * If set to true the default material outlined icons are not used.
+          * @default false
          */
         "filled": boolean;
+        /**
+          * Icon library for this instance. Overrides the global default. - "material-icons"  → Material Icons - "material-symbols"  → Material Symbols
+         */
+        "library"?: IconLibrary;
         /**
           * The icon's size.
+          * @default 'inherit'
          */
         "size": | 'inherit'
     | 'xSmall'
@@ -841,6 +1077,7 @@ export namespace Components {
     interface SixIconButton {
         /**
           * Set to true to disable the button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -865,6 +1102,7 @@ export namespace Components {
         "name"?: string;
         /**
           * The icon's size.
+          * @default 'medium'
          */
         "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
         /**
@@ -880,34 +1118,42 @@ export namespace Components {
     interface SixInput {
         /**
           * The input's autocaptialize attribute.
+          * @default 'off'
          */
         "autocapitalize": string;
         /**
           * The input's autocomplete attribute.
+          * @default 'off'
          */
         "autocomplete": string;
         /**
           * The input's autocorrect attribute.
+          * @default 'off'
          */
         "autocorrect": 'on' | 'off';
         /**
           * The input's autofocus attribute.
+          * @default false
          */
         "autofocus": boolean;
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable": boolean;
         /**
           * Set to true to disable the input.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Internal: Styles the input for the dropdown filter search.
+          * @default false
          */
         "dropdownSearch": boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -920,6 +1166,7 @@ export namespace Components {
         "getSelectionRange": () => Promise<SelectionRange>;
         /**
           * The input's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText": string;
         /**
@@ -928,14 +1175,17 @@ export namespace Components {
         "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label": string;
         /**
           * Set to render as line
+          * @default false
          */
         "line": boolean;
         /**
@@ -956,6 +1206,7 @@ export namespace Components {
         "minlength"?: number;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name": string;
         /**
@@ -964,6 +1215,7 @@ export namespace Components {
         "pattern"?: string;
         /**
           * Set to true to draw a pill-style input with rounded edges.
+          * @default false
          */
         "pill": boolean;
         /**
@@ -972,6 +1224,7 @@ export namespace Components {
         "placeholder"?: string;
         /**
           * Set to true to make the input readonly.
+          * @default false
          */
         "readonly": boolean;
         /**
@@ -980,6 +1233,7 @@ export namespace Components {
         "removeFocus": () => Promise<void>;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
@@ -1000,10 +1254,12 @@ export namespace Components {
         "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection) => Promise<void | undefined>;
         /**
           * The input's size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * Enables spell checking on the input.
+          * @default false
          */
         "spellcheck": boolean;
         /**
@@ -1012,14 +1268,17 @@ export namespace Components {
         "step"?: number;
         /**
           * Set to true to add a password toggle button for password inputs.
+          * @default false
          */
         "togglePassword": boolean;
         /**
           * The input's type.
+          * @default 'text'
          */
         "type": 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
         /**
           * The input's value attribute.
+          * @default ''
          */
         "value": string;
     }
@@ -1030,10 +1289,12 @@ export namespace Components {
     interface SixItemPicker {
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce": number;
         /**
           * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+          * @default DEFAULT_DEBOUNCE_INSANELY_FAST
          */
         "interval": number;
         /**
@@ -1050,44 +1311,54 @@ export namespace Components {
         "min"?: number | string;
         /**
           * Defines whether the items should be padded
+          * @default false
          */
         "padded": boolean;
         /**
           * Defines the character used for padding
+          * @default '0'
          */
         "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
+          * @default ItemPickerPaddingDirection.BEFORE
          */
         "paddingDirection": ItemPickerPaddingDirection;
         /**
           * Defines the length of the padded area
+          * @default 2
          */
         "paddingLength": number;
         /**
           * Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa.
+          * @default true
          */
         "roundtrip": boolean;
         /**
           * Defines how many steps should be taken when navigating
+          * @default 1
          */
         "step": number;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "timeout": number;
         /**
           * The type of items you want to rotate through.
+          * @default ItemPickerType.NUMBER
          */
         "type": ItemPickerType;
         /**
           * The item picker's value attribute.
+          * @default ''
          */
         "value": number | string;
     }
     interface SixLanguageSwitcher {
         /**
           * The languages which should be selectable options.
+          * @default DEFAULT_LANGUAGES
          */
         "languages": string[] | SixLanguageSwitcherInput[];
         /**
@@ -1112,6 +1383,7 @@ export namespace Components {
     interface SixLogo {
         /**
           * The brand of the logo. Either six or bme. Defaults to six.
+          * @default 'six'
          */
         "brand": 'six' | 'bme';
     }
@@ -1122,6 +1394,7 @@ export namespace Components {
     interface SixMainContainer {
         /**
           * Set to false to remove top and bottom padding.
+          * @default true
          */
         "padded": boolean;
     }
@@ -1133,14 +1406,17 @@ export namespace Components {
     interface SixMenu {
         /**
           * Internal: Disables handling of key presses.
+          * @default false
          */
         "disableKeyboardHandling": boolean;
         /**
           * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling
+          * @default 10
          */
         "itemSize": number;
         /**
           * Set the options to be shown in the dropdown
+          * @default null
          */
         "items": SixMenuItemData1[] | null;
         /**
@@ -1149,10 +1425,12 @@ export namespace Components {
         "itemsShown"?: number;
         /**
           * Set to true to remove the box-shadow
+          * @default false
          */
         "removeBoxShadow": boolean;
         /**
           * Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes.
+          * @default 15
          */
         "scrollingDebounce": number;
         /**
@@ -1161,6 +1439,7 @@ export namespace Components {
         "typeToSelect": (key: string) => Promise<void>;
         /**
           * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+          * @default false
          */
         "virtualScroll": boolean;
     }
@@ -1179,14 +1458,17 @@ export namespace Components {
     interface SixMenuItem {
         /**
           * Defines if the checked state is displayed as a checkbox or a check-icon
+          * @default 'check'
          */
         "checkType": 'checkbox' | 'check';
         /**
           * Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the checked state
+          * @default false
          */
         "checked": boolean;
         /**
           * Set to true to draw the menu item in a disabled state.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1203,6 +1485,7 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * A unique value to store in the menu item. This can be used as a way to identify menu items when selected.
+          * @default ''
          */
         "value": string;
     }
@@ -1220,6 +1503,7 @@ export namespace Components {
     interface SixPicto {
         /**
           * Defines the size of the icon.
+          * @default 'medium'
          */
         "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
     }
@@ -1231,10 +1515,12 @@ export namespace Components {
     interface SixProgressBar {
         /**
           * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+          * @default false
          */
         "indeterminate": boolean;
         /**
           * The progress bar's percentage, 0 to 100.
+          * @default 0
          */
         "percentage": number;
     }
@@ -1246,14 +1532,17 @@ export namespace Components {
     interface SixProgressRing {
         /**
           * The current progress percentage, 0 - 100.
+          * @default 0
          */
         "percentage": number;
         /**
           * The size of the progress ring in pixels.
+          * @default 128
          */
         "size": number;
         /**
           * The stroke width of the progress ring in pixels.
+          * @default 4
          */
         "strokeWidth": number;
     }
@@ -1265,18 +1554,22 @@ export namespace Components {
     interface SixRadio {
         /**
           * Set to true to draw the radio in a checked state.
+          * @default false
          */
         "checked": boolean;
         /**
           * Set to true to disable the radio.
+          * @default false
          */
         "disabled": boolean;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The radio's name attribute.
+          * @default ''
          */
         "name": string;
         /**
@@ -1289,6 +1582,7 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * The radio's value attribute.
+          * @default 'on'
          */
         "value": string;
     }
@@ -1300,10 +1594,12 @@ export namespace Components {
     interface SixRange {
         /**
           * Set to true to disable the input.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -1312,26 +1608,32 @@ export namespace Components {
         "errorTextCount"?: number;
         /**
           * The range's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText": string;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label": string;
         /**
           * The input's max attribute.
+          * @default 100
          */
         "max": number;
         /**
           * The input's min attribute.
+          * @default 0
          */
         "min": number;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name": string;
         /**
@@ -1340,6 +1642,7 @@ export namespace Components {
         "removeFocus": () => Promise<void>;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
@@ -1348,18 +1651,83 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * The input's step attribute.
+          * @default 1
          */
         "step": number;
         /**
           * The preferred placedment of the tooltip.
+          * @default 'top'
          */
         "tooltip": 'top' | 'bottom' | 'none';
         /**
           * A function used to format the tooltip's value.
+          * @default (value: number) => value.toString()
          */
         "tooltipFormatter": (value: number) => string;
         /**
           * The input's value attribute.
+          * @default 0
+         */
+        "value": number;
+    }
+    interface SixRating {
+        /**
+          * Set to true to disable the rating.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The error message shown, if `invalid` is set to true.
+          * @default ''
+         */
+        "errorText": string | string[];
+        /**
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
+         */
+        "errorTextCount"?: number;
+        /**
+          * The rating's help text. Alternatively, you can use the help-text slot.
+          * @default ''
+         */
+        "helpText": string;
+        /**
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * The label text.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Maximum number of stars. Default is 5
+          * @default 5
+         */
+        "max": number;
+        /**
+          * The rating's name attribute.
+          * @default ''
+         */
+        "name": string;
+        /**
+          * If its readonly
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Set to true to show an asterisk beneath the label.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Size of the stars
+          * @default 'medium'
+         */
+        "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+        /**
+          * The rating's value attribute.
+          * @default 0
          */
         "value": number;
     }
@@ -1370,14 +1738,17 @@ export namespace Components {
     interface SixRoot {
         /**
           * Defines whether the content section should be padded
+          * @default true
          */
         "padded": boolean;
         /**
           * Defines the stage of the application
+          * @default null
          */
         "stage": StageType;
         /**
           * Defines the version of the application
+          * @default ''
          */
         "version": string;
     }
@@ -1388,14 +1759,17 @@ export namespace Components {
     interface SixSearchField {
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable": boolean;
         /**
           * Debounce time in milliseconds, default is 300 ms
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce": number;
         /**
           * Set to true to disable the input.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1404,6 +1778,7 @@ export namespace Components {
         "placeholder"?: string;
         /**
           * The input's value attribute.
+          * @default ''
          */
         "value": string;
     }
@@ -1415,22 +1790,27 @@ export namespace Components {
     interface SixSelect {
         /**
           * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+          * @default false
          */
         "asyncFilter": boolean;
         /**
           * Set to true to turn the six-select into an autocomplete.
+          * @default false
          */
         "autocomplete": boolean;
         /**
           * Set to true to add a clear button when the select is populated.
+          * @default false
          */
         "clearable": boolean;
         /**
           * Set to true to disable the select control.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -1439,6 +1819,7 @@ export namespace Components {
         "errorTextCount"?: number;
         /**
           * Set to true to allow filtering for entries in the dropdown
+          * @default false
          */
         "filter": boolean;
         /**
@@ -1451,59 +1832,67 @@ export namespace Components {
         "filterPlaceholder"?: string;
         /**
           * The select's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText": string;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist": boolean;
         /**
           * The debounce for when the input changes for autocompletes should be emitted
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "inputDebounce": number;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label": string;
         /**
           * Set to render as line
+          * @default false
          */
         "line": boolean;
-        /**
-          * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to -1 to remove the limit.
-          * @deprecated : This property is ignored. The component now displays as many items as possible and computes the "+n" dynamically.
-         */
-        "maxTagsVisible": number;
         /**
           * Set to true to enable multiselect.
+          * @default false
          */
         "multiple": boolean;
         /**
           * The select's name.
+          * @default ''
          */
         "name": string;
         /**
           * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+          * @default null
          */
         "options": SixMenuItemData[] | null;
         /**
           * Set to true to draw a pill-style select with rounded edges.
+          * @default false
          */
         "pill": boolean;
         /**
           * The select's placeholder text.
+          * @default ''
          */
         "placeholder": string;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
           * Enables the select all button.
+          * @default false
          */
         "selectAllButton": boolean;
         /**
@@ -1516,14 +1905,17 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * The select's size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * The value of the control. This will be a string or an array depending on `multiple`.
+          * @default ''
          */
         "value": string | string[];
         /**
           * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+          * @default false
          */
         "virtualScroll": boolean;
     }
@@ -1538,10 +1930,12 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
           * Sidebar position
+          * @default 'left'
          */
         "position": 'left' | 'right';
         /**
@@ -1562,10 +1956,12 @@ export namespace Components {
         "toggle": () => Promise<void>;
         /**
           * Define whether sidebar is toggled meaning only one menu can be open at the same time
+          * @default false
          */
         "toggled": boolean;
         /**
           * Sidebar width
+          * @default '16rem'
          */
         "width": string;
     }
@@ -1576,18 +1972,26 @@ export namespace Components {
     interface SixSidebarItem {
         /**
           * Set to true to draw the sidebar item in a disabled state.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
          */
         "href": string | undefined;
+        /**
+          * Icon of the item
+          * @default ''
+         */
+        "icon": string;
         /**
           * Set to true to draw the item in a selected state.
+          * @default false
          */
         "selected": boolean;
         /**
           * A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected.
+          * @default ''
          */
         "value": string;
     }
@@ -1602,14 +2006,17 @@ export namespace Components {
         "href": string | undefined;
         /**
           * Icon of the group
+          * @default ''
          */
         "icon": string;
         /**
           * Title of item group
+          * @default ''
          */
         "name": string;
         /**
           * Indicates whether the sidebar is shown
+          * @default false
          */
         "open": boolean;
         /**
@@ -1618,6 +2025,7 @@ export namespace Components {
         "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.
+          * @default ''
          */
         "value": string;
     }
@@ -1639,6 +2047,7 @@ export namespace Components {
     interface SixStageIndicator {
         /**
           * The indicators value attribute
+          * @default null
          */
         "stage": StageType1;
     }
@@ -1650,14 +2059,17 @@ export namespace Components {
     interface SixSwitch {
         /**
           * Set to true to draw the switch in a checked state.
+          * @default false
          */
         "checked": boolean;
         /**
           * Set to true to disable the switch.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -1666,14 +2078,17 @@ export namespace Components {
         "errorTextCount"?: number;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label": string;
         /**
           * The switch's name attribute.
+          * @default ''
          */
         "name": string;
         /**
@@ -1682,6 +2097,7 @@ export namespace Components {
         "removeFocus": () => Promise<void>;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
@@ -1690,6 +2106,7 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * The switch's value attribute.
+          * @default 'on'
          */
         "value": string;
     }
@@ -1701,18 +2118,22 @@ export namespace Components {
     interface SixTab {
         /**
           * Set to true to draw the tab in an active state.
+          * @default false
          */
         "active": boolean;
         /**
           * When true, the tab will be rendered with a close icon.
+          * @default false
          */
         "closable": boolean;
         /**
           * Set to true to draw the tab in a disabled state.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The name of the tab panel the tab will control. The panel must be located in the same tab group.
+          * @default ''
          */
         "panel": string;
         /**
@@ -1732,10 +2153,12 @@ export namespace Components {
     interface SixTabGroup {
         /**
           * Disables the scroll arrows that appear when tabs overflow.
+          * @default false
          */
         "noScrollControls": boolean;
         /**
           * The placement of the tabs.
+          * @default 'top'
          */
         "placement": 'top' | 'bottom' | 'left' | 'right';
         /**
@@ -1751,10 +2174,12 @@ export namespace Components {
     interface SixTabPanel {
         /**
           * When true, the tab panel will be shown.
+          * @default false
          */
         "active": boolean;
         /**
           * The tab panel's name.
+          * @default ''
          */
         "name": string;
     }
@@ -1766,18 +2191,22 @@ export namespace Components {
     interface SixTag {
         /**
           * Set to true to make the tag clearable.
+          * @default false
          */
         "clearable": boolean;
         /**
           * Set to true to draw a pill-style tag with rounded edges.
+          * @default false
          */
         "pill": boolean;
         /**
           * The tag's size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * The tag's type.
+          * @default 'primary'
          */
         "type": 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text';
     }
@@ -1789,26 +2218,32 @@ export namespace Components {
     interface SixTextarea {
         /**
           * The textarea's autocaptialize attribute.
+          * @default 'off'
          */
         "autocapitalize": string;
         /**
           * The textarea's autocomplete attribute.
+          * @default 'off'
          */
         "autocomplete": string;
         /**
           * The textarea's autocorrect attribute.
+          * @default 'off'
          */
         "autocorrect": 'on' | 'off';
         /**
           * The textarea's autofocus attribute.
+          * @default false
          */
         "autofocus": boolean;
         /**
           * Set to true to disable the textarea.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -1817,6 +2252,7 @@ export namespace Components {
         "errorTextCount"?: number;
         /**
           * The textarea's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText": string;
         /**
@@ -1825,10 +2261,12 @@ export namespace Components {
         "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label": string;
         /**
@@ -1841,6 +2279,7 @@ export namespace Components {
         "minlength"?: number;
         /**
           * The textarea's name attribute.
+          * @default ''
          */
         "name": string;
         /**
@@ -1849,6 +2288,7 @@ export namespace Components {
         "placeholder"?: string;
         /**
           * Set to true for a readonly textarea.
+          * @default false
          */
         "readonly": boolean;
         /**
@@ -1857,14 +2297,17 @@ export namespace Components {
         "removeFocus": () => Promise<void>;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
           * Controls how the textarea can be resized.
+          * @default 'vertical'
          */
         "resize": 'none' | 'vertical' | 'auto';
         /**
           * The number of rows to display by default.
+          * @default 4
          */
         "rows": number;
         /**
@@ -1885,14 +2328,17 @@ export namespace Components {
         "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => Promise<void | undefined>;
         /**
           * The textarea's size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * The textarea's spellcheck attribute.
+          * @default false
          */
         "spellcheck": boolean;
         /**
           * The textarea's value attribute.
+          * @default ''
          */
         "value": string;
     }
@@ -1903,18 +2349,22 @@ export namespace Components {
     interface SixTile {
         /**
           * Flag, whether the tile is closeable.
+          * @default true
          */
         "closeable": boolean;
         /**
           * Enables tile tooltip for tiles
+          * @default true
          */
         "disableTooltip": boolean;
         /**
           * Set to true to disable the tile.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Flag, whether the tile should cast a shadow.
+          * @default false
          */
         "elevated": boolean;
         /**
@@ -1927,6 +2377,7 @@ export namespace Components {
         "iconName"?: string;
         /**
           * The tile's label.
+          * @default ''
          */
         "label": string;
         /**
@@ -1935,6 +2386,7 @@ export namespace Components {
         "show": () => Promise<void>;
         /**
           * The tile's size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
     }
@@ -1945,10 +2397,12 @@ export namespace Components {
     interface SixTimepicker {
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable": boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce": number;
         /**
@@ -1957,10 +2411,12 @@ export namespace Components {
         "defaultTime"?: string;
         /**
           * If `true` the component is disabled.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The input's error text. Alternatively, you can use the error-text slot.
+          * @default ''
          */
         "errorText": string | string[];
         /**
@@ -1969,38 +2425,47 @@ export namespace Components {
         "errorTextCount"?: number;
         /**
           * Define the time format. Valid formats are:  HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms  where HH is the 24 hour format and hh is the 12 hour format  Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm
+          * @default 'HH:mm:ss'
          */
         "format": TimeFormat;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist": boolean;
         /**
           * Set the position of the icon
+          * @default 'left'
          */
         "iconPosition": 'left' | 'right';
         /**
           * Indicates whether the timepicker should be shown as an inline (always open) component
+          * @default false
          */
         "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.
+          * @default DEFAULT_DEBOUNCE_INSANELY_FAST
          */
         "interval": number;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid": boolean;
         /**
           * The input's label. Alternatively, you can use the label slot.
+          * @default ''
          */
         "label": string;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name": string;
         /**
           * Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
@@ -2013,14 +2478,17 @@ export namespace Components {
         "placement"?: 'top' | 'bottom';
         /**
           * If `true` the user can only select a time via the timepicker but not directly edit the input field.
+          * @default false
          */
         "readonly": boolean;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required": boolean;
         /**
           * Define the separator to be shown between the time unit pickers. Please be aware that this property will modify the displayed separator only. The separator for a timestring is always expected to be a colon (eg. '13:52:20')
+          * @default ':'
          */
         "separator": string;
         /**
@@ -2029,14 +2497,17 @@ export namespace Components {
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * Timepicker size.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "timeout": number;
         /**
           * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
+          * @default ''
          */
         "value": string;
     }
@@ -2048,14 +2519,17 @@ export namespace Components {
     interface SixTooltip {
         /**
           * The tooltip's content. Alternatively, you can use the content slot.
+          * @default ''
          */
         "content": string;
         /**
           * Set to true to disable the tooltip, so it won't show when triggered.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The distance in pixels from which to offset the tooltip away from its target.
+          * @default 10
          */
         "distance": number;
         /**
@@ -2064,10 +2538,12 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open": boolean;
         /**
           * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside the viewport.
+          * @default 'top'
          */
         "placement": | 'top'
     | 'top-start'
@@ -2087,10 +2563,12 @@ export namespace Components {
         "show": () => Promise<void>;
         /**
           * The distance in pixels from which to offset the tooltip along its target.
+          * @default 0
          */
         "skidding": number;
         /**
           * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
+          * @default 'hover focus'
          */
         "trigger": string;
     }
@@ -2107,6 +2585,10 @@ export interface SixCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixCheckboxElement;
 }
+export interface SixDateCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSixDateElement;
+}
 export interface SixDatepickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixDatepickerElement;
@@ -2135,10 +2617,6 @@ export interface SixFileUploadCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixFileUploadElement;
 }
-export interface SixHeaderCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLSixHeaderElement;
-}
 export interface SixInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixInputElement;
@@ -2163,6 +2641,10 @@ export interface SixRangeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixRangeElement;
 }
+export interface SixRatingCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSixRatingElement;
+}
 export interface SixSearchFieldCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixSearchFieldElement;
@@ -2255,6 +2737,28 @@ declare global {
         prototype: HTMLSixBadgeElement;
         new (): HTMLSixBadgeElement;
     };
+    /**
+     * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+     * @since 5.0
+     * @status beta
+     */
+    interface HTMLSixBreadcrumbsElement extends Components.SixBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLSixBreadcrumbsElement: {
+        prototype: HTMLSixBreadcrumbsElement;
+        new (): HTMLSixBreadcrumbsElement;
+    };
+    /**
+     * Breadcrumb items are used inside breadcrumbs to represent different links.
+     * @since 5.0
+     * @status beta
+     */
+    interface HTMLSixBreadcrumbsItemElement extends Components.SixBreadcrumbsItem, HTMLStencilElement {
+    }
+    var HTMLSixBreadcrumbsItemElement: {
+        prototype: HTMLSixBreadcrumbsItemElement;
+        new (): HTMLSixBreadcrumbsItemElement;
+    };
     interface HTMLSixButtonElementEventMap {
         "six-button-blur": EmptyPayload;
         "six-button-focus": EmptyPayload;
@@ -2312,6 +2816,29 @@ declare global {
         prototype: HTMLSixCheckboxElement;
         new (): HTMLSixCheckboxElement;
     };
+    interface HTMLSixDateElementEventMap {
+        "six-change": string | '';
+        "six-blur": any;
+    }
+    /**
+     * A date picker component that allows users to select dates via a calendar popup or direct input.
+     * @since 5.0
+     * @status beta
+     */
+    interface HTMLSixDateElement extends Components.SixDate, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixDateElementEventMap>(type: K, listener: (this: HTMLSixDateElement, ev: SixDateCustomEvent<HTMLSixDateElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixDateElementEventMap>(type: K, listener: (this: HTMLSixDateElement, ev: SixDateCustomEvent<HTMLSixDateElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSixDateElement: {
+        prototype: HTMLSixDateElement;
+        new (): HTMLSixDateElement;
+    };
     interface HTMLSixDatepickerElementEventMap {
         "six-datepicker-select": SixDatepickerSelectPayload;
         "six-datepicker-clear": EmptyPayload;
@@ -2319,7 +2846,7 @@ declare global {
     }
     /**
      * @since 1.0
-     * @status stable
+     * @status deprecated. Use six-date instead.
      */
     interface HTMLSixDatepickerElement extends Components.SixDatepicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLSixDatepickerElementEventMap>(type: K, listener: (this: HTMLSixDatepickerElement, ev: SixDatepickerCustomEvent<HTMLSixDatepickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2366,7 +2893,7 @@ declare global {
         "six-dialog-hide": EmptyPayload;
         "six-dialog-after-hide": EmptyPayload;
         "six-dialog-initial-focus": EmptyPayload;
-        "six-dialog-overlay-dismiss": EmptyPayload;
+        "six-dialog-request-close": SixDialogRequestClose;
     }
     /**
      * @since 1.0
@@ -2393,7 +2920,7 @@ declare global {
         "six-drawer-hide": EmptyPayload;
         "six-drawer-after-hide": EmptyPayload;
         "six-drawer-initial-focus": EmptyPayload;
-        "six-drawer-overlay-dismiss": EmptyPayload;
+        "six-drawer-request-close": SixDrawerRequestClose;
     }
     /**
      * @since 1.0
@@ -2532,27 +3059,11 @@ declare global {
         prototype: HTMLSixGroupLabelElement;
         new (): HTMLSixGroupLabelElement;
     };
-    interface HTMLSixHeaderElementEventMap {
-        "six-header-app-name-clicked": EmptyPayload;
-        "six-header-app-switcher-select": SixHeaderAppSwitcherSelectPayload;
-        "six-header-profile-select": SixHeaderProfileSelectPayload;
-        "six-header-hamburger-menu-clicked": EmptyPayload;
-        "six-header-logo-clicked": EmptyPayload;
-        "six-header-search-field-toggle": SixHeaderSearchFieldToggle;
-    }
     /**
      * @since 1.0
      * @status stable
      */
     interface HTMLSixHeaderElement extends Components.SixHeader, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLSixHeaderElementEventMap>(type: K, listener: (this: HTMLSixHeaderElement, ev: SixHeaderCustomEvent<HTMLSixHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLSixHeaderElementEventMap>(type: K, listener: (this: HTMLSixHeaderElement, ev: SixHeaderCustomEvent<HTMLSixHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSixHeaderElement: {
         prototype: HTMLSixHeaderElement;
@@ -2560,7 +3071,7 @@ declare global {
     };
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface HTMLSixHeaderDropdownItemElement extends Components.SixHeaderDropdownItem, HTMLStencilElement {
     }
@@ -2570,7 +3081,7 @@ declare global {
     };
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface HTMLSixHeaderItemElement extends Components.SixHeaderItem, HTMLStencilElement {
     }
@@ -2580,7 +3091,7 @@ declare global {
     };
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface HTMLSixHeaderMenuButtonElement extends Components.SixHeaderMenuButton, HTMLStencilElement {
     }
@@ -2839,6 +3350,25 @@ declare global {
         prototype: HTMLSixRangeElement;
         new (): HTMLSixRangeElement;
     };
+    interface HTMLSixRatingElementEventMap {
+        "six-rating-blur": number;
+        "six-rating-change": number;
+        "six-rating-focus": EmptyPayload;
+    }
+    interface HTMLSixRatingElement extends Components.SixRating, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixRatingElementEventMap>(type: K, listener: (this: HTMLSixRatingElement, ev: SixRatingCustomEvent<HTMLSixRatingElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixRatingElementEventMap>(type: K, listener: (this: HTMLSixRatingElement, ev: SixRatingCustomEvent<HTMLSixRatingElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSixRatingElement: {
+        prototype: HTMLSixRatingElement;
+        new (): HTMLSixRatingElement;
+    };
     /**
      * @since 1.0
      * @status stable
@@ -3157,9 +3687,12 @@ declare global {
         "six-alert": HTMLSixAlertElement;
         "six-avatar": HTMLSixAvatarElement;
         "six-badge": HTMLSixBadgeElement;
+        "six-breadcrumbs": HTMLSixBreadcrumbsElement;
+        "six-breadcrumbs-item": HTMLSixBreadcrumbsItemElement;
         "six-button": HTMLSixButtonElement;
         "six-card": HTMLSixCardElement;
         "six-checkbox": HTMLSixCheckboxElement;
+        "six-date": HTMLSixDateElement;
         "six-datepicker": HTMLSixDatepickerElement;
         "six-details": HTMLSixDetailsElement;
         "six-dialog": HTMLSixDialogElement;
@@ -3193,6 +3726,7 @@ declare global {
         "six-progress-ring": HTMLSixProgressRingElement;
         "six-radio": HTMLSixRadioElement;
         "six-range": HTMLSixRangeElement;
+        "six-rating": HTMLSixRatingElement;
         "six-root": HTMLSixRootElement;
         "six-search-field": HTMLSixSearchFieldElement;
         "six-select": HTMLSixSelectElement;
@@ -3221,10 +3755,12 @@ declare namespace LocalJSX {
     interface SixAlert {
         /**
           * Set to true to make the alert closable.
+          * @default false
          */
         "closable"?: boolean;
         /**
           * The length of time, in milliseconds, the alert will show before closing itself. If the user hovers over the toast alert, the timer will pause. On leaving the element with the mouse, the timer resets.
+          * @default Infinity
          */
         "duration"?: number;
         /**
@@ -3245,10 +3781,12 @@ declare namespace LocalJSX {
         "onSix-alert-show"?: (event: SixAlertCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
           * The type of alert.
+          * @default 'primary'
          */
         "type"?: AlertType;
     }
@@ -3260,18 +3798,22 @@ declare namespace LocalJSX {
     interface SixAvatar {
         /**
           * Alternative text for the image.
+          * @default ''
          */
         "alt"?: string;
         /**
           * The image source to use for the avatar.
+          * @default ''
          */
         "image"?: string;
         /**
           * Initials to use as a fallback when no image is available (1-2 characters max recommended).
+          * @default ''
          */
         "initials"?: string;
         /**
           * The shape of the avatar.
+          * @default 'circle'
          */
         "shape"?: 'circle' | 'square' | 'rounded';
     }
@@ -3283,17 +3825,57 @@ declare namespace LocalJSX {
     interface SixBadge {
         /**
           * Set to true to draw a pill-style badge with rounded edges.
+          * @default false
          */
         "pill"?: boolean;
         /**
           * Set to true to make the badge pulsate to draw attention.
+          * @default false
          */
         "pulse"?: boolean;
         /**
           * The badge's type.
+          * @default 'primary'
          */
         "type"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action';
     }
+    /**
+     * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+     * @since 5.0
+     * @status beta
+     */
+    interface SixBreadcrumbs {
+        /**
+          * Defines an icon as a separator without having to place a slot *
+          * @default ''
+         */
+        "separatorIcon"?: string;
+    }
+    /**
+     * Breadcrumb items are used inside breadcrumbs to represent different links.
+     * @since 5.0
+     * @status beta
+     */
+    interface SixBreadcrumbsItem {
+        /**
+          * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+         */
+        "href"?: string;
+        /**
+          * Set to true to readonly the breadcrumb item.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * The breadcrumbs item size.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Tells the browser where to open the link. Only used when `href` is set.
+         */
+        "target"?: '_blank' | '_parent' | '_self' | '_top';
+    }
     /**
      * @since 1.0
      * @status stable
@@ -3302,14 +3884,17 @@ declare namespace LocalJSX {
     interface SixButton {
         /**
           * Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
+          * @default false
          */
         "caret"?: boolean;
         /**
           * Set to true to draw a circle button.
+          * @default false
          */
         "circle"?: boolean;
         /**
           * Set to true to disable the button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -3322,10 +3907,12 @@ declare namespace LocalJSX {
         "href"?: string;
         /**
           * Set to true to draw the button in a loading state.
+          * @default false
          */
         "loading"?: boolean;
         /**
           * An optional name for the button. Ignored when `href` is set.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -3338,18 +3925,22 @@ declare namespace LocalJSX {
         "onSix-button-focus"?: (event: SixButtonCustomEvent<EmptyPayload>) => void;
         /**
           * Set to true to draw a pill-style button with rounded edges.
+          * @default false
          */
         "pill"?: boolean;
         /**
           * Indicates if activating the button should reset the form.
+          * @default false
          */
         "reset"?: boolean;
         /**
           * The button's size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * Indicates if activating the button should submit the form. Ignored when `href` is set.
+          * @default false
          */
         "submit"?: boolean;
         /**
@@ -3358,6 +3949,7 @@ declare namespace LocalJSX {
         "target"?: '_blank' | '_parent' | '_self' | '_top';
         /**
           * The button's type.
+          * @default 'primary'
          */
         "type"?: | 'secondary'
     | 'primary'
@@ -3369,6 +3961,7 @@ declare namespace LocalJSX {
     | 'action-outline';
         /**
           * An optional value for the button. Ignored when `href` is set.
+          * @default ''
          */
         "value"?: string;
     }
@@ -3386,14 +3979,17 @@ declare namespace LocalJSX {
     interface SixCheckbox {
         /**
           * Set to true to draw the checkbox in a checked state.
+          * @default false
          */
         "checked"?: boolean;
         /**
           * Set to true to disable the checkbox.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -3402,18 +3998,22 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * Set to true to draw the checkbox in an indeterminate state.
+          * @default false
          */
         "indeterminate"?: boolean;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label"?: string;
         /**
           * The checkbox's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -3430,28 +4030,134 @@ declare namespace LocalJSX {
         "onSix-checkbox-focus"?: (event: SixCheckboxCustomEvent<EmptyPayload>) => void;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * 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>`.
+          * @default 'on'
          */
         "value"?: string;
     }
+    /**
+     * A date picker component that allows users to select dates via a calendar popup or direct input.
+     * @since 5.0
+     * @status beta
+     */
+    interface SixDate {
+        /**
+          * Callback to determine which dates in the picker should be selectable.
+          * @default () => true
+         */
+        "allowedDates"?: (date: string) => boolean;
+        /**
+          * Set to true to add a clear button when the input is populated.
+          * @default false
+         */
+        "clearable"?: boolean;
+        /**
+          * Defines the format pattern for displaying dates and how dates can be entered via keyboard.  The parser accepts flexible input that doesn't strictly match the format pattern. Input with missing leading zeros or incomplete years will be automatically normalized. For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and "1.1.225" becomes "01.01.0225".  Defaults to "dd.MM.yyyy".  Available patterns: - Year: "yyyy" (e.g., "2021") - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January) - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)  Examples: - "dd.MM.yyyy" -> "31.01.2024" - "yyyy-MM-dd" -> "2024-01-31" - "d.M.yyyy" -> "31.1.2024"
+          * @default 'dd.MM.yyyy'
+         */
+        "dateFormat"?: string;
+        /**
+          * If `true` the component is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The error message shown, if `invalid` is set to true.
+          * @default ''
+         */
+        "errorText"?: string | string[];
+        /**
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
+         */
+        "errorTextCount"?: number;
+        /**
+          * The input's help text. Alternatively, you can use the help-text slot.
+          * @default ''
+         */
+        "helpText"?: string;
+        /**
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * The label text.
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * The language used to render the weekdays and months.
+          * @default 'en'
+         */
+        "language"?: Language;
+        /**
+          * The maximum allowed selectable date in ISO format (yyyy-MM-dd). Dates after this value will be disabled in the date picker. Example: '2025-01-01'
+         */
+        "max"?: string;
+        /**
+          * The minimum allowed selectable date in ISO format (yyyy-MM-dd). Dates before this value will be disabled in the date picker. Example: '2024-01-01'
+         */
+        "min"?: string;
+        /**
+          * The input's name attribute.
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus or the date picker popup is closed. Does not contain event details.
+         */
+        "onSix-blur"?: (event: SixDateCustomEvent<any>) => void;
+        /**
+          * Emitted when the control's value changes. Event detail contains the new date value in ISO format (yyyy-MM-dd) or an empty string if cleared.
+         */
+        "onSix-change"?: (event: SixDateCustomEvent<string | ''>) => void;
+        /**
+          * The placeholder defines what text to be shown on the input element
+         */
+        "placeholder"?: string;
+        /**
+          * If `true` the user can only select a date via the component in the popup but not directly edit the input field.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to true to show an asterisk beneath the label.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * The size of the date input field.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The value of the form field in ISO 8601 date format (yyyy-MM-dd). Example: '2024-01-01'.  When an invalid date is provided, it will be replaced with an empty string (''), matching the behavior of native HTML <input type="date">.  The displayed format can be customized using the dateFormat property, but the underlying value will always be stored in ISO format.
+          * @default ''
+         */
+        "value"?: string | '';
+    }
     /**
      * @since 1.0
-     * @status stable
+     * @status deprecated. Use six-date instead.
      */
     interface SixDatepicker {
         /**
           * Callback to determine which date in the datepicker should be selectable. the callback function will get a datestring as an argument, e.g. '2021-07-04'  Usage e.g.: const datepicker = document.getElementById('allowed-date-picker'); datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+          * @default () => true
          */
         "allowedDates"?: (date: Date) => boolean;
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable"?: boolean;
         /**
           * Closes the datepicker dropdown after selection
+          * @default this.type === 'date'
          */
         "closeOnSelect"?: boolean;
         /**
@@ -3460,10 +4166,12 @@ declare namespace LocalJSX {
         "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'
+          * @default SixDateFormats.DDMMYYY_DOT
          */
         "dateFormat"?: SixDateFormats;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce"?: number;
         /**
@@ -3472,10 +4180,12 @@ declare namespace LocalJSX {
         "defaultDate"?: string;
         /**
           * If `true` the component is disabled.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -3484,26 +4194,32 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist"?: boolean;
         /**
           * Set the position of the icon
+          * @default 'left'
          */
         "iconPosition"?: 'left' | 'right';
         /**
           * Indicates whether or not the calendar should be shown as an inline (always open) component
+          * @default false
          */
         "inline"?: boolean;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label"?: string;
         /**
           * The language used to render the weekdays and months.
+          * @default 'en'
          */
         "locale"?: 'en' | 'de' | 'fr' | 'it' | 'es';
         /**
@@ -3516,6 +4232,7 @@ declare namespace LocalJSX {
         "min"?: Date;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -3532,6 +4249,7 @@ declare namespace LocalJSX {
         "onSix-datepicker-select"?: (event: SixDatepickerCustomEvent<SixDatepickerSelectPayload>) => void;
         /**
           * Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
@@ -3544,18 +4262,22 @@ declare namespace LocalJSX {
         "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.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * Datepicker size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * Set the type.
+          * @default 'date'
          */
         "type"?: 'date' | 'date-time';
         /**
@@ -3571,14 +4293,17 @@ declare namespace LocalJSX {
     interface SixDetails {
         /**
           * Set to true to prevent the user from toggling the details.
+          * @default false
          */
         "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'
+          * @default true
          */
         "hasContent"?: boolean;
         /**
           * Set to true when you want to use six-details inline e.g. in a sidebar
+          * @default false
          */
         "inline"?: boolean;
         /**
@@ -3599,14 +4324,17 @@ declare namespace LocalJSX {
         "onSix-details-show"?: (event: SixDetailsCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether the details is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
           * Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children
+          * @default false
          */
         "selectableEmpty"?: boolean;
         /**
           * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead.
+          * @default ''
          */
         "summary"?: string;
         /**
@@ -3615,6 +4343,7 @@ declare namespace LocalJSX {
         "summaryIcon"?: string;
         /**
           * The icon's size.
+          * @default 'inherit'
          */
         "summaryIconSize"?: | 'inherit'
     | 'xSmall'
@@ -3633,10 +4362,12 @@ declare namespace LocalJSX {
     interface SixDialog {
         /**
           * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+          * @default ''
          */
         "label"?: string;
         /**
           * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.
+          * @default false
          */
         "noHeader"?: boolean;
         /**
@@ -3656,15 +4387,16 @@ declare namespace LocalJSX {
          */
         "onSix-dialog-initial-focus"?: (event: SixDialogCustomEvent<EmptyPayload>) => void;
         /**
-          * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing.
+          * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
          */
-        "onSix-dialog-overlay-dismiss"?: (event: SixDialogCustomEvent<EmptyPayload>) => void;
+        "onSix-dialog-request-close"?: (event: SixDialogCustomEvent<SixDialogRequestClose>) => void;
         /**
           * Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
         "onSix-dialog-show"?: (event: SixDialogCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether the dialog is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
     }
@@ -3676,14 +4408,17 @@ declare namespace LocalJSX {
     interface SixDrawer {
         /**
           * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
+          * @default false
          */
         "contained"?: boolean;
         /**
           * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+          * @default ''
          */
         "label"?: string;
         /**
           * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
+          * @default false
          */
         "noHeader"?: boolean;
         /**
@@ -3703,19 +4438,21 @@ declare namespace LocalJSX {
          */
         "onSix-drawer-initial-focus"?: (event: SixDrawerCustomEvent<EmptyPayload>) => void;
         /**
-          * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.
+          * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
          */
-        "onSix-drawer-overlay-dismiss"?: (event: SixDrawerCustomEvent<EmptyPayload>) => void;
+        "onSix-drawer-request-close"?: (event: SixDrawerCustomEvent<SixDrawerRequestClose>) => void;
         /**
           * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
         "onSix-drawer-show"?: (event: SixDrawerCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether the drawer is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
           * The direction from which the drawer will open.
+          * @default 'right'
          */
         "placement"?: 'top' | 'right' | 'bottom' | 'left';
     }
@@ -3727,14 +4464,17 @@ declare namespace LocalJSX {
     interface SixDropdown {
         /**
           * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+          * @default false
          */
         "asyncFilter"?: boolean;
         /**
           * By default the search field will be focused when opening a dropdown with filtering enabled.
+          * @default true
          */
         "autofocusFilter"?: boolean;
         /**
           * Determines whether the dropdown should hide when a menu item is selected.
+          * @default true
          */
         "closeOnSelect"?: boolean;
         /**
@@ -3743,30 +4483,37 @@ declare namespace LocalJSX {
         "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
+          * @default false
          */
         "disableHideOnEnterAndSpace"?: boolean;
         /**
           * The distance in pixels from which to offset the panel away from its trigger.
+          * @default 4
          */
         "distance"?: number;
         /**
           * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead
+          * @default false
          */
         "filter"?: boolean;
         /**
           * The debounce for the filter callbacks.
+          * @default 0
          */
         "filterDebounce"?: number;
         /**
           * The filter's placeholder text.
+          * @default 'Filter...'
          */
         "filterPlaceholder"?: string;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist"?: boolean;
         /**
           * Determines if the dropdown panel's width should match the width of the trigger element.  If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width.
+          * @default false
          */
         "matchTriggerWidth"?: boolean;
         /**
@@ -3799,14 +4546,17 @@ declare namespace LocalJSX {
         "onSix-dropdown-show"?: (event: SixDropdownCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
           * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+          * @default []
          */
         "options"?: SixMenuItemData[];
         /**
           * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport.
+          * @default 'bottom-start'
          */
         "placement"?: | 'top'
     | 'top-start'
@@ -3822,10 +4572,12 @@ declare namespace LocalJSX {
     | 'left-end';
         /**
           * The distance in pixels from which to offset the panel along its trigger.
+          * @default 0
          */
         "skidding"?: number;
         /**
           * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+          * @default false
          */
         "virtualScroll"?: boolean;
     }
@@ -3854,6 +4606,7 @@ declare namespace LocalJSX {
         "errorCode"?: 404 | 403 | 500;
         /**
           * Defines language and thus displays the proper error page in the selected language.
+          * @default 'en'
          */
         "language"?: 'en' | 'de';
     }
@@ -3870,22 +4623,27 @@ declare namespace LocalJSX {
     interface SixFileListItem {
         /**
           * The date when the file was uploaded
+          * @default ''
          */
         "date"?: string;
         /**
           * An id to clearly identify the file
+          * @default ''
          */
         "identifier"?: string;
         /**
           * The filename
+          * @default ''
          */
         "name"?: string;
         /**
           * Set to true if you don't want to allow to delete this file
+          * @default false
          */
         "nodelete"?: boolean;
         /**
           * Set to true if you don't want to allow to download this file
+          * @default false
          */
         "nodownload"?: boolean;
         /**
@@ -3912,18 +4670,22 @@ declare namespace LocalJSX {
         "accept"?: string;
         /**
           * Set to true if file control should be small.
+          * @default false
          */
         "compact"?: boolean;
         /**
           * Set when button is disabled.
+          * @default false
          */
         "disabled"?: false;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
@@ -3936,6 +4698,7 @@ declare namespace LocalJSX {
         "maxFileSize"?: number;
         /**
           * More than one file allowed.
+          * @default false
          */
         "multiple"?: false;
         /**
@@ -3948,6 +4711,7 @@ declare namespace LocalJSX {
         "onSix-file-upload-success"?: (event: SixFileUploadCustomEvent<SixFileUploadSuccessPayload>) => void;
         /**
           * Set to true to draw the control in a loading state.
+          * @default false
          */
         "uploading"?: boolean;
     }
@@ -3964,22 +4728,27 @@ declare namespace LocalJSX {
     interface SixGroupLabel {
         /**
           * Set to true to disable the label.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The wrapper label's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText"?: string;
         /**
           * The wrapper label's label. Alternatively, you can use the label slot.
+          * @default ''
          */
         "label"?: string;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * The label's size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
     }
@@ -3989,95 +4758,73 @@ declare namespace LocalJSX {
      */
     interface SixHeader {
         /**
-          * Set whether the logo should be clickable
-          * @deprecated Use six-header `custom` property with `six-logo` instead
-         */
-        "clickableLogo"?: boolean;
-        /**
-          * Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots are ignored.  Use `six-header-item`, `six-header-dropdown-item` and `six-header-menu-button` to structure the content.
-          * @since 4.2.7
-          * @status beta
-         */
-        "custom"?: boolean;
-        /**
-          * Set whether the hamburger menu should be visible or not
-          * @deprecated Use six-header `custom` property instead
-         */
-        "hideHamburgerMenu"?: boolean;
-        /**
-          * The displayed logo. Either six or bme. Defaults to six.
-          * @deprecated Use six-header `custom` property with `six-logo` instead
-         */
-        "logo"?: 'six' | 'bme';
-        /**
-          * Emitted when the name of the selected app is clicked.
-          * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead
-         */
-        "onSix-header-app-name-clicked"?: (event: SixHeaderCustomEvent<EmptyPayload>) => void;
-        /**
-          * Emitted when a menu item is in the app switcher menu is selected.
-          * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead
-         */
-        "onSix-header-app-switcher-select"?: (event: SixHeaderCustomEvent<SixHeaderAppSwitcherSelectPayload>) => void;
-        /**
-          * Emitted when the hamburger menu is clicked.
-          * @deprecated Use six-header `custom` property instead
-         */
-        "onSix-header-hamburger-menu-clicked"?: (event: SixHeaderCustomEvent<EmptyPayload>) => void;
-        /**
-          * Emitted when the header logo is clicked.
-          * @deprecated Use six-header `custom` property instead
-         */
-        "onSix-header-logo-clicked"?: (event: SixHeaderCustomEvent<EmptyPayload>) => void;
-        /**
-          * Emitted when a menu item is in the profile menu is selected.
-          * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-avatar` instead
-         */
-        "onSix-header-profile-select"?: (event: SixHeaderCustomEvent<SixHeaderProfileSelectPayload>) => void;
-        /**
-          * Emitted when search field is toggled.
-          * @deprecated Use six-header `custom` property instead
-         */
-        "onSix-header-search-field-toggle"?: (event: SixHeaderCustomEvent<SixHeaderSearchFieldToggle>) => void;
-        /**
-          * Set the hamburger menu icon to open or closed state
-          * @deprecated Use six-header `custom` property instead
-         */
-        "openHamburgerMenu"?: boolean;
-        /**
-          * Set the header search to be in an open or closed state.  If `custom` is `true`, focuses the first `six-input` found in the search slot.
+          * Set the header search input to be in an open or closed state.  Focuses the first `six-input` found in the search slot.
+          * @default false
          */
         "openSearch"?: boolean;
         /**
           * Indicates if content should be shifted down when search field is visible.
+          * @default false
          */
         "shiftContent"?: boolean;
     }
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface SixHeaderDropdownItem {
+        /**
+          * Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead
+          * @default false
+         */
+        "filter"?: boolean;
+        /**
+          * The filter's placeholder text.
+          * @default 'Filter...'
+         */
+        "filterPlaceholder"?: string;
     }
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface SixHeaderItem {
         /**
           * Indicates whether the item is styled as active. When set to `true`, a border is displayed below the trigger element.  Use <code>six-header-dropdown-item</code> to automatically set the active state for dropdowns.
+          * @default false
          */
         "active"?: boolean;
     }
     /**
      * @since 4.2.7
-     * @status beta
+     * @status stable
      */
     interface SixHeaderMenuButton {
         /**
-          * The icon of the menu button.
+          * Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
+          * @default false
          */
-        "icon"?: string;
+        "caret"?: boolean;
+        /**
+          * Set to true to disable the button.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to true to draw the button in a loading state.
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * Indicates if activating the button should reset the form.
+          * @default false
+         */
+        "reset"?: boolean;
+        /**
+          * Indicates if activating the button should submit the form. Ignored when `href` is set.
+          * @default false
+         */
+        "submit"?: boolean;
     }
     /**
      * @since 1.0
@@ -4086,10 +4833,16 @@ declare namespace LocalJSX {
     interface SixIcon {
         /**
           * If set to true the default material outlined icons are not used.
+          * @default false
          */
         "filled"?: boolean;
+        /**
+          * Icon library for this instance. Overrides the global default. - "material-icons"  → Material Icons - "material-symbols"  → Material Symbols
+         */
+        "library"?: IconLibrary;
         /**
           * The icon's size.
+          * @default 'inherit'
          */
         "size"?: | 'inherit'
     | 'xSmall'
@@ -4108,6 +4861,7 @@ declare namespace LocalJSX {
     interface SixIconButton {
         /**
           * Set to true to disable the button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -4132,6 +4886,7 @@ declare namespace LocalJSX {
         "name"?: string;
         /**
           * The icon's size.
+          * @default 'medium'
          */
         "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
         /**
@@ -4147,34 +4902,42 @@ declare namespace LocalJSX {
     interface SixInput {
         /**
           * The input's autocaptialize attribute.
+          * @default 'off'
          */
         "autocapitalize"?: string;
         /**
           * The input's autocomplete attribute.
+          * @default 'off'
          */
         "autocomplete"?: string;
         /**
           * The input's autocorrect attribute.
+          * @default 'off'
          */
         "autocorrect"?: 'on' | 'off';
         /**
           * The input's autofocus attribute.
+          * @default false
          */
         "autofocus"?: boolean;
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable"?: boolean;
         /**
           * Set to true to disable the input.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Internal: Styles the input for the dropdown filter search.
+          * @default false
          */
         "dropdownSearch"?: boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -4183,6 +4946,7 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * The input's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText"?: string;
         /**
@@ -4191,14 +4955,17 @@ declare namespace LocalJSX {
         "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label"?: string;
         /**
           * Set to render as line
+          * @default false
          */
         "line"?: boolean;
         /**
@@ -4219,6 +4986,7 @@ declare namespace LocalJSX {
         "minlength"?: number;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -4247,6 +5015,7 @@ declare namespace LocalJSX {
         "pattern"?: string;
         /**
           * Set to true to draw a pill-style input with rounded edges.
+          * @default false
          */
         "pill"?: boolean;
         /**
@@ -4255,18 +5024,22 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         /**
           * Set to true to make the input readonly.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * The input's size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * Enables spell checking on the input.
+          * @default false
          */
         "spellcheck"?: boolean;
         /**
@@ -4275,14 +5048,17 @@ declare namespace LocalJSX {
         "step"?: number;
         /**
           * Set to true to add a password toggle button for password inputs.
+          * @default false
          */
         "togglePassword"?: boolean;
         /**
           * The input's type.
+          * @default 'text'
          */
         "type"?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
         /**
           * The input's value attribute.
+          * @default ''
          */
         "value"?: string;
     }
@@ -4293,10 +5069,12 @@ declare namespace LocalJSX {
     interface SixItemPicker {
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce"?: number;
         /**
           * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+          * @default DEFAULT_DEBOUNCE_INSANELY_FAST
          */
         "interval"?: number;
         /**
@@ -4321,44 +5099,54 @@ declare namespace LocalJSX {
         "onSix-item-picker-change-debounced"?: (event: SixItemPickerCustomEvent<SixItemPickerChangePayload>) => void;
         /**
           * Defines whether the items should be padded
+          * @default false
          */
         "padded"?: boolean;
         /**
           * Defines the character used for padding
+          * @default '0'
          */
         "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
+          * @default ItemPickerPaddingDirection.BEFORE
          */
         "paddingDirection"?: ItemPickerPaddingDirection;
         /**
           * Defines the length of the padded area
+          * @default 2
          */
         "paddingLength"?: number;
         /**
           * Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa.
+          * @default true
          */
         "roundtrip"?: boolean;
         /**
           * Defines how many steps should be taken when navigating
+          * @default 1
          */
         "step"?: number;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "timeout"?: number;
         /**
           * The type of items you want to rotate through.
+          * @default ItemPickerType.NUMBER
          */
         "type"?: ItemPickerType;
         /**
           * The item picker's value attribute.
+          * @default ''
          */
         "value"?: number | string;
     }
     interface SixLanguageSwitcher {
         /**
           * The languages which should be selectable options.
+          * @default DEFAULT_LANGUAGES
          */
         "languages"?: string[] | SixLanguageSwitcherInput[];
         /**
@@ -4387,6 +5175,7 @@ declare namespace LocalJSX {
     interface SixLogo {
         /**
           * The brand of the logo. Either six or bme. Defaults to six.
+          * @default 'six'
          */
         "brand"?: 'six' | 'bme';
     }
@@ -4397,6 +5186,7 @@ declare namespace LocalJSX {
     interface SixMainContainer {
         /**
           * Set to false to remove top and bottom padding.
+          * @default true
          */
         "padded"?: boolean;
     }
@@ -4408,14 +5198,17 @@ declare namespace LocalJSX {
     interface SixMenu {
         /**
           * Internal: Disables handling of key presses.
+          * @default false
          */
         "disableKeyboardHandling"?: boolean;
         /**
           * Used for virtual scrolling Define how many items should be rendered in the DOM when using virtual scrolling
+          * @default 10
          */
         "itemSize"?: number;
         /**
           * Set the options to be shown in the dropdown
+          * @default null
          */
         "items"?: SixMenuItemData1[] | null;
         /**
@@ -4428,14 +5221,17 @@ declare namespace LocalJSX {
         "onSix-menu-item-selected"?: (event: SixMenuCustomEvent<SixMenuItemSelectedPayload>) => void;
         /**
           * Set to true to remove the box-shadow
+          * @default false
          */
         "removeBoxShadow"?: boolean;
         /**
           * Used for virtual scrolling Define the debounce for listening on scrolling changes in milliseconds. The lower the number the more sensitive the component reacts to scrolling changes.
+          * @default 15
          */
         "scrollingDebounce"?: number;
         /**
           * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+          * @default false
          */
         "virtualScroll"?: boolean;
     }
@@ -4454,18 +5250,22 @@ declare namespace LocalJSX {
     interface SixMenuItem {
         /**
           * Defines if the checked state is displayed as a checkbox or a check-icon
+          * @default 'check'
          */
         "checkType"?: 'checkbox' | 'check';
         /**
           * Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the checked state
+          * @default false
          */
         "checked"?: boolean;
         /**
           * Set to true to draw the menu item in a disabled state.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * A unique value to store in the menu item. This can be used as a way to identify menu items when selected.
+          * @default ''
          */
         "value"?: string;
     }
@@ -4483,6 +5283,7 @@ declare namespace LocalJSX {
     interface SixPicto {
         /**
           * Defines the size of the icon.
+          * @default 'medium'
          */
         "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
     }
@@ -4494,10 +5295,12 @@ declare namespace LocalJSX {
     interface SixProgressBar {
         /**
           * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+          * @default false
          */
         "indeterminate"?: boolean;
         /**
           * The progress bar's percentage, 0 to 100.
+          * @default 0
          */
         "percentage"?: number;
     }
@@ -4509,14 +5312,17 @@ declare namespace LocalJSX {
     interface SixProgressRing {
         /**
           * The current progress percentage, 0 - 100.
+          * @default 0
          */
         "percentage"?: number;
         /**
           * The size of the progress ring in pixels.
+          * @default 128
          */
         "size"?: number;
         /**
           * The stroke width of the progress ring in pixels.
+          * @default 4
          */
         "strokeWidth"?: number;
     }
@@ -4528,18 +5334,22 @@ declare namespace LocalJSX {
     interface SixRadio {
         /**
           * Set to true to draw the radio in a checked state.
+          * @default false
          */
         "checked"?: boolean;
         /**
           * Set to true to disable the radio.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The radio's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -4556,6 +5366,7 @@ declare namespace LocalJSX {
         "onSix-radio-focus"?: (event: SixRadioCustomEvent<EmptyPayload>) => void;
         /**
           * The radio's value attribute.
+          * @default 'on'
          */
         "value"?: string;
     }
@@ -4567,10 +5378,12 @@ declare namespace LocalJSX {
     interface SixRange {
         /**
           * Set to true to disable the input.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -4579,26 +5392,32 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * The range's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText"?: string;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label"?: string;
         /**
           * The input's max attribute.
+          * @default 100
          */
         "max"?: number;
         /**
           * The input's min attribute.
+          * @default 0
          */
         "min"?: number;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -4615,22 +5434,100 @@ declare namespace LocalJSX {
         "onSix-range-focus"?: (event: SixRangeCustomEvent<EmptyPayload>) => void;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * The input's step attribute.
+          * @default 1
          */
         "step"?: number;
         /**
           * The preferred placedment of the tooltip.
+          * @default 'top'
          */
         "tooltip"?: 'top' | 'bottom' | 'none';
         /**
           * A function used to format the tooltip's value.
+          * @default (value: number) => value.toString()
          */
         "tooltipFormatter"?: (value: number) => string;
         /**
           * The input's value attribute.
+          * @default 0
+         */
+        "value"?: number;
+    }
+    interface SixRating {
+        /**
+          * Set to true to disable the rating.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The error message shown, if `invalid` is set to true.
+          * @default ''
+         */
+        "errorText"?: string | string[];
+        /**
+          * The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
+         */
+        "errorTextCount"?: number;
+        /**
+          * The rating's help text. Alternatively, you can use the help-text slot.
+          * @default ''
+         */
+        "helpText"?: string;
+        /**
+          * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * The label text.
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Maximum number of stars. Default is 5
+          * @default 5
+         */
+        "max"?: number;
+        /**
+          * The rating's name attribute.
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Emitted when the control loses focus.
+         */
+        "onSix-rating-blur"?: (event: SixRatingCustomEvent<number>) => void;
+        /**
+          * Emitted when the control's checked state changes.
+         */
+        "onSix-rating-change"?: (event: SixRatingCustomEvent<number>) => void;
+        /**
+          * Emitted when the control gains focus.
+         */
+        "onSix-rating-focus"?: (event: SixRatingCustomEvent<EmptyPayload>) => void;
+        /**
+          * If its readonly
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to true to show an asterisk beneath the label.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Size of the stars
+          * @default 'medium'
+         */
+        "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+        /**
+          * The rating's value attribute.
+          * @default 0
          */
         "value"?: number;
     }
@@ -4641,14 +5538,17 @@ declare namespace LocalJSX {
     interface SixRoot {
         /**
           * Defines whether the content section should be padded
+          * @default true
          */
         "padded"?: boolean;
         /**
           * Defines the stage of the application
+          * @default null
          */
         "stage"?: StageType;
         /**
           * Defines the version of the application
+          * @default ''
          */
         "version"?: string;
     }
@@ -4659,14 +5559,17 @@ declare namespace LocalJSX {
     interface SixSearchField {
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable"?: boolean;
         /**
           * Debounce time in milliseconds, default is 300 ms
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce"?: number;
         /**
           * Set to true to disable the input.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -4679,6 +5582,7 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         /**
           * The input's value attribute.
+          * @default ''
          */
         "value"?: string;
     }
@@ -4690,22 +5594,27 @@ declare namespace LocalJSX {
     interface SixSelect {
         /**
           * Set to true to allow async filtering. When you enter something in the search field the component will only emit an event but not filter any elements itself. You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+          * @default false
          */
         "asyncFilter"?: boolean;
         /**
           * Set to true to turn the six-select into an autocomplete.
+          * @default false
          */
         "autocomplete"?: boolean;
         /**
           * Set to true to add a clear button when the select is populated.
+          * @default false
          */
         "clearable"?: boolean;
         /**
           * Set to true to disable the select control.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -4714,6 +5623,7 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * Set to true to allow filtering for entries in the dropdown
+          * @default false
          */
         "filter"?: boolean;
         /**
@@ -4726,39 +5636,42 @@ declare namespace LocalJSX {
         "filterPlaceholder"?: string;
         /**
           * The select's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText"?: string;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist"?: boolean;
         /**
           * The debounce for when the input changes for autocompletes should be emitted
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "inputDebounce"?: number;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label"?: string;
         /**
           * Set to render as line
+          * @default false
          */
         "line"?: boolean;
-        /**
-          * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to -1 to remove the limit.
-          * @deprecated : This property is ignored. The component now displays as many items as possible and computes the "+n" dynamically.
-         */
-        "maxTagsVisible"?: number;
         /**
           * Set to true to enable multiselect.
+          * @default false
          */
         "multiple"?: boolean;
         /**
           * The select's name.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -4775,22 +5688,27 @@ declare namespace LocalJSX {
         "onSix-select-focus"?: (event: SixSelectCustomEvent<EmptyPayload>) => void;
         /**
           * Set the options to be shown in the dropdown (alternative to setting the elements via html)
+          * @default null
          */
         "options"?: SixMenuItemData[] | null;
         /**
           * Set to true to draw a pill-style select with rounded edges.
+          * @default false
          */
         "pill"?: boolean;
         /**
           * The select's placeholder text.
+          * @default ''
          */
         "placeholder"?: string;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * Enables the select all button.
+          * @default false
          */
         "selectAllButton"?: boolean;
         /**
@@ -4799,14 +5717,17 @@ declare namespace LocalJSX {
         "selectAllText"?: string;
         /**
           * The select's size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * The value of the control. This will be a string or an array depending on `multiple`.
+          * @default ''
          */
         "value"?: string | string[];
         /**
           * Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around) are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot.
+          * @default false
          */
         "virtualScroll"?: boolean;
     }
@@ -4837,18 +5758,22 @@ declare namespace LocalJSX {
         "onSix-sidebar-show"?: (event: SixSidebarCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
           * Sidebar position
+          * @default 'left'
          */
         "position"?: 'left' | 'right';
         /**
           * Define whether sidebar is toggled meaning only one menu can be open at the same time
+          * @default false
          */
         "toggled"?: boolean;
         /**
           * Sidebar width
+          * @default '16rem'
          */
         "width"?: string;
     }
@@ -4859,18 +5784,26 @@ declare namespace LocalJSX {
     interface SixSidebarItem {
         /**
           * Set to true to draw the sidebar item in a disabled state.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
          */
         "href"?: string | undefined;
+        /**
+          * Icon of the item
+          * @default ''
+         */
+        "icon"?: string;
         /**
           * Set to true to draw the item in a selected state.
+          * @default false
          */
         "selected"?: boolean;
         /**
           * A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected.
+          * @default ''
          */
         "value"?: string;
     }
@@ -4885,14 +5818,17 @@ declare namespace LocalJSX {
         "href"?: string | undefined;
         /**
           * Icon of the group
+          * @default ''
          */
         "icon"?: string;
         /**
           * Title of item group
+          * @default ''
          */
         "name"?: string;
         /**
           * Indicates whether the sidebar is shown
+          * @default false
          */
         "open"?: boolean;
         /**
@@ -4901,6 +5837,7 @@ declare namespace LocalJSX {
         "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.
+          * @default ''
          */
         "value"?: string;
     }
@@ -4922,6 +5859,7 @@ declare namespace LocalJSX {
     interface SixStageIndicator {
         /**
           * The indicators value attribute
+          * @default null
          */
         "stage"?: StageType1;
     }
@@ -4933,14 +5871,17 @@ declare namespace LocalJSX {
     interface SixSwitch {
         /**
           * Set to true to draw the switch in a checked state.
+          * @default false
          */
         "checked"?: boolean;
         /**
           * Set to true to disable the switch.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -4949,14 +5890,17 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label"?: string;
         /**
           * The switch's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -4973,10 +5917,12 @@ declare namespace LocalJSX {
         "onSix-switch-focus"?: (event: SixSwitchCustomEvent<EmptyPayload>) => void;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * The switch's value attribute.
+          * @default 'on'
          */
         "value"?: string;
     }
@@ -4988,14 +5934,17 @@ declare namespace LocalJSX {
     interface SixTab {
         /**
           * Set to true to draw the tab in an active state.
+          * @default false
          */
         "active"?: boolean;
         /**
           * When true, the tab will be rendered with a close icon.
+          * @default false
          */
         "closable"?: boolean;
         /**
           * Set to true to draw the tab in a disabled state.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5004,6 +5953,7 @@ declare namespace LocalJSX {
         "onSix-tab-close"?: (event: SixTabCustomEvent<EmptyPayload>) => void;
         /**
           * The name of the tab panel the tab will control. The panel must be located in the same tab group.
+          * @default ''
          */
         "panel"?: string;
     }
@@ -5015,6 +5965,7 @@ declare namespace LocalJSX {
     interface SixTabGroup {
         /**
           * Disables the scroll arrows that appear when tabs overflow.
+          * @default false
          */
         "noScrollControls"?: boolean;
         /**
@@ -5027,6 +5978,7 @@ declare namespace LocalJSX {
         "onSix-tab-show"?: (event: SixTabGroupCustomEvent<SixTabShowPayload>) => void;
         /**
           * The placement of the tabs.
+          * @default 'top'
          */
         "placement"?: 'top' | 'bottom' | 'left' | 'right';
     }
@@ -5038,10 +5990,12 @@ declare namespace LocalJSX {
     interface SixTabPanel {
         /**
           * When true, the tab panel will be shown.
+          * @default false
          */
         "active"?: boolean;
         /**
           * The tab panel's name.
+          * @default ''
          */
         "name"?: string;
     }
@@ -5053,6 +6007,7 @@ declare namespace LocalJSX {
     interface SixTag {
         /**
           * Set to true to make the tag clearable.
+          * @default false
          */
         "clearable"?: boolean;
         /**
@@ -5061,14 +6016,17 @@ declare namespace LocalJSX {
         "onSix-tag-clear"?: (event: SixTagCustomEvent<EmptyPayload>) => void;
         /**
           * Set to true to draw a pill-style tag with rounded edges.
+          * @default false
          */
         "pill"?: boolean;
         /**
           * The tag's size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * The tag's type.
+          * @default 'primary'
          */
         "type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text';
     }
@@ -5080,26 +6038,32 @@ declare namespace LocalJSX {
     interface SixTextarea {
         /**
           * The textarea's autocaptialize attribute.
+          * @default 'off'
          */
         "autocapitalize"?: string;
         /**
           * The textarea's autocomplete attribute.
+          * @default 'off'
          */
         "autocomplete"?: string;
         /**
           * The textarea's autocorrect attribute.
+          * @default 'off'
          */
         "autocorrect"?: 'on' | 'off';
         /**
           * The textarea's autofocus attribute.
+          * @default false
          */
         "autofocus"?: boolean;
         /**
           * Set to true to disable the textarea.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The error message shown, if `invalid` is set to true.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -5108,6 +6072,7 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * The textarea's help text. Alternatively, you can use the help-text slot.
+          * @default ''
          */
         "helpText"?: string;
         /**
@@ -5116,10 +6081,12 @@ declare namespace LocalJSX {
         "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The label text.
+          * @default ''
          */
         "label"?: string;
         /**
@@ -5132,6 +6099,7 @@ declare namespace LocalJSX {
         "minlength"?: number;
         /**
           * The textarea's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -5156,30 +6124,37 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         /**
           * Set to true for a readonly textarea.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * Controls how the textarea can be resized.
+          * @default 'vertical'
          */
         "resize"?: 'none' | 'vertical' | 'auto';
         /**
           * The number of rows to display by default.
+          * @default 4
          */
         "rows"?: number;
         /**
           * The textarea's size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * The textarea's spellcheck attribute.
+          * @default false
          */
         "spellcheck"?: boolean;
         /**
           * The textarea's value attribute.
+          * @default ''
          */
         "value"?: string;
     }
@@ -5190,18 +6165,22 @@ declare namespace LocalJSX {
     interface SixTile {
         /**
           * Flag, whether the tile is closeable.
+          * @default true
          */
         "closeable"?: boolean;
         /**
           * Enables tile tooltip for tiles
+          * @default true
          */
         "disableTooltip"?: boolean;
         /**
           * Set to true to disable the tile.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Flag, whether the tile should cast a shadow.
+          * @default false
          */
         "elevated"?: boolean;
         /**
@@ -5210,6 +6189,7 @@ declare namespace LocalJSX {
         "iconName"?: string;
         /**
           * The tile's label.
+          * @default ''
          */
         "label"?: string;
         /**
@@ -5222,6 +6202,7 @@ declare namespace LocalJSX {
         "onSix-tile-selected"?: (event: SixTileCustomEvent<EmptyPayload>) => void;
         /**
           * The tile's size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
     }
@@ -5232,10 +6213,12 @@ declare namespace LocalJSX {
     interface SixTimepicker {
         /**
           * Set to true to add a clear button when the input is populated.
+          * @default false
          */
         "clearable"?: boolean;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event. If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click (and keep pressed) and once you release
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "debounce"?: number;
         /**
@@ -5244,10 +6227,12 @@ declare namespace LocalJSX {
         "defaultTime"?: string;
         /**
           * If `true` the component is disabled.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The input's error text. Alternatively, you can use the error-text slot.
+          * @default ''
          */
         "errorText"?: string | string[];
         /**
@@ -5256,34 +6241,42 @@ declare namespace LocalJSX {
         "errorTextCount"?: number;
         /**
           * Define the time format. Valid formats are:  HH:mm:ss hh:mm:ss:aa HH:mm:ss:ms hh:mm:ss:ms:aa HH:mm hh:mm:aa HH hh:aa mm ss ms  where HH is the 24 hour format and hh is the 12 hour format  Please notice that when using the 12-hour-clock (hh) you always need a period indicator (aa). So the time can be parsed as either am or pm
+          * @default 'HH:mm:ss'
          */
         "format"?: TimeFormat;
         /**
           * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+          * @default false
          */
         "hoist"?: boolean;
         /**
           * Set the position of the icon
+          * @default 'left'
          */
         "iconPosition"?: 'left' | 'right';
         /**
           * Indicates whether the timepicker should be shown as an inline (always open) component
+          * @default false
          */
         "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.
+          * @default DEFAULT_DEBOUNCE_INSANELY_FAST
          */
         "interval"?: number;
         /**
           * If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
+          * @default false
          */
         "invalid"?: boolean;
         /**
           * The input's label. Alternatively, you can use the label slot.
+          * @default ''
          */
         "label"?: string;
         /**
           * The input's name attribute.
+          * @default ''
          */
         "name"?: string;
         /**
@@ -5300,6 +6293,7 @@ declare namespace LocalJSX {
         "onSix-timepicker-clear"?: (event: SixTimepickerCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
@@ -5312,26 +6306,32 @@ declare namespace LocalJSX {
         "placement"?: 'top' | 'bottom';
         /**
           * If `true` the user can only select a time via the timepicker but not directly edit the input field.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * Set to true to show an asterisk beneath the label.
+          * @default false
          */
         "required"?: boolean;
         /**
           * Define the separator to be shown between the time unit pickers. Please be aware that this property will modify the displayed separator only. The separator for a timestring is always expected to be a colon (eg. '13:52:20')
+          * @default ':'
          */
         "separator"?: string;
         /**
           * Timepicker size.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
+          * @default DEFAULT_DEBOUNCE_FAST
          */
         "timeout"?: number;
         /**
           * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
+          * @default ''
          */
         "value"?: string;
     }
@@ -5343,14 +6343,17 @@ declare namespace LocalJSX {
     interface SixTooltip {
         /**
           * The tooltip's content. Alternatively, you can use the content slot.
+          * @default ''
          */
         "content"?: string;
         /**
           * Set to true to disable the tooltip, so it won't show when triggered.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The distance in pixels from which to offset the tooltip away from its target.
+          * @default 10
          */
         "distance"?: number;
         /**
@@ -5371,10 +6374,12 @@ declare namespace LocalJSX {
         "onSix-tooltip-show"?: (event: SixTooltipCustomEvent<EmptyPayload>) => void;
         /**
           * Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods.
+          * @default false
          */
         "open"?: boolean;
         /**
           * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside the viewport.
+          * @default 'top'
          */
         "placement"?: | 'top'
     | 'top-start'
@@ -5390,10 +6395,12 @@ declare namespace LocalJSX {
     | 'left-end';
         /**
           * The distance in pixels from which to offset the tooltip along its target.
+          * @default 0
          */
         "skidding"?: number;
         /**
           * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
+          * @default 'hover focus'
          */
         "trigger"?: string;
     }
@@ -5401,9 +6408,12 @@ declare namespace LocalJSX {
         "six-alert": SixAlert;
         "six-avatar": SixAvatar;
         "six-badge": SixBadge;
+        "six-breadcrumbs": SixBreadcrumbs;
+        "six-breadcrumbs-item": SixBreadcrumbsItem;
         "six-button": SixButton;
         "six-card": SixCard;
         "six-checkbox": SixCheckbox;
+        "six-date": SixDate;
         "six-datepicker": SixDatepicker;
         "six-details": SixDetails;
         "six-dialog": SixDialog;
@@ -5437,6 +6447,7 @@ declare namespace LocalJSX {
         "six-progress-ring": SixProgressRing;
         "six-radio": SixRadio;
         "six-range": SixRange;
+        "six-rating": SixRating;
         "six-root": SixRoot;
         "six-search-field": SixSearchField;
         "six-select": SixSelect;
@@ -5478,6 +6489,18 @@ declare module "@stencil/core" {
              * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
              */
             "six-badge": LocalJSX.SixBadge & JSXBase.HTMLAttributes<HTMLSixBadgeElement>;
+            /**
+             * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+             * @since 5.0
+             * @status beta
+             */
+            "six-breadcrumbs": LocalJSX.SixBreadcrumbs & JSXBase.HTMLAttributes<HTMLSixBreadcrumbsElement>;
+            /**
+             * Breadcrumb items are used inside breadcrumbs to represent different links.
+             * @since 5.0
+             * @status beta
+             */
+            "six-breadcrumbs-item": LocalJSX.SixBreadcrumbsItem & JSXBase.HTMLAttributes<HTMLSixBreadcrumbsItemElement>;
             /**
              * @since 1.0
              * @status stable
@@ -5495,9 +6518,15 @@ declare module "@stencil/core" {
              * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
              */
             "six-checkbox": LocalJSX.SixCheckbox & JSXBase.HTMLAttributes<HTMLSixCheckboxElement>;
+            /**
+             * A date picker component that allows users to select dates via a calendar popup or direct input.
+             * @since 5.0
+             * @status beta
+             */
+            "six-date": LocalJSX.SixDate & JSXBase.HTMLAttributes<HTMLSixDateElement>;
             /**
              * @since 1.0
-             * @status stable
+             * @status deprecated. Use six-date instead.
              */
             "six-datepicker": LocalJSX.SixDatepicker & JSXBase.HTMLAttributes<HTMLSixDatepickerElement>;
             /**
@@ -5562,17 +6591,17 @@ declare module "@stencil/core" {
             "six-header": LocalJSX.SixHeader & JSXBase.HTMLAttributes<HTMLSixHeaderElement>;
             /**
              * @since 4.2.7
-             * @status beta
+             * @status stable
              */
             "six-header-dropdown-item": LocalJSX.SixHeaderDropdownItem & JSXBase.HTMLAttributes<HTMLSixHeaderDropdownItemElement>;
             /**
              * @since 4.2.7
-             * @status beta
+             * @status stable
              */
             "six-header-item": LocalJSX.SixHeaderItem & JSXBase.HTMLAttributes<HTMLSixHeaderItemElement>;
             /**
              * @since 4.2.7
-             * @status beta
+             * @status stable
              */
             "six-header-menu-button": LocalJSX.SixHeaderMenuButton & JSXBase.HTMLAttributes<HTMLSixHeaderMenuButtonElement>;
             /**
@@ -5666,6 +6695,7 @@ declare module "@stencil/core" {
              * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
              */
             "six-range": LocalJSX.SixRange & JSXBase.HTMLAttributes<HTMLSixRangeElement>;
+            "six-rating": LocalJSX.SixRating & JSXBase.HTMLAttributes<HTMLSixRatingElement>;
             /**
              * @since 1.0
              * @status stable