@otto-de/b2b-core-components 1.6.1 → 1.8.0

package/dist/types/components.d.ts

@@ -5,18 +5,18 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+import { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
+import { CheckboxEventDetail, ChipComponentEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 import { IconName } from "./components/icon/types";
 import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
-import { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
 import { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
 import { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
 import { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface";
 import { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
-export { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
+export { CheckboxEventDetail, ChipComponentEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 export { IconName } from "./components/icon/types";
 export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
-export { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
 export { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
 export { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
 export { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface";
@@ -62,6 +62,22 @@ export namespace Components {
          */
         "target": 'self' | 'blank' | 'parent' | 'top';
     }
+    interface B2bBreadcrumb {
+    }
+    interface B2bBreadcrumbItem {
+        /**
+          * If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state.
+         */
+        "active": boolean;
+        /**
+          * If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked.
+         */
+        "href": string;
+        /**
+          * The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar.
+         */
+        "value": any;
+    }
     interface B2bButton {
         /**
           * Whether the button is currently active. Set to true when using the button to signify a permanent active state
@@ -196,6 +212,24 @@ export namespace Components {
          */
         "required": boolean;
     }
+    interface B2bChipComponent {
+        /**
+          * Whether the chip is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Whether or not the chip component has a close button. Per default it is true.
+         */
+        "hasCloseButton": boolean;
+        /**
+          * The text content of the chip. It is required.
+         */
+        "label": string;
+        /**
+          * It is only used when the chip component participates in a group
+         */
+        "value"?: any;
+    }
     interface B2bDropdown {
         /**
           * Whether the select as a whole is disabled. Per default it is false.
@@ -236,17 +270,17 @@ export namespace Components {
         /**
           * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row.
          */
-        "span": | 1
-    | 2
-    | 3
-    | 4
-    | 5
-    | 6
-    | 7
-    | 8
-    | 9
-    | 10
-    | 11
+        "span": | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | 7
+    | 8
+    | 9
+    | 10
+    | 11
     | 12;
         /**
           * The alignment of text placed inside of a column. Note that this will apply to all children.
@@ -265,11 +299,11 @@ export namespace Components {
         /**
           * Horizontal alignment of columns.
          */
-        "justify": | 'start'
-    | 'end'
-    | 'center'
-    | 'space-around'
-    | 'space-between'
+        "justify": | 'start'
+    | 'end'
+    | 'center'
+    | 'space-around'
+    | 'space-between'
     | 'space-evenly';
         /**
           * The spacing between individual rows in px.
@@ -365,12 +399,12 @@ export namespace Components {
         /**
           * The type of the input. All native HTML types except date or month are supported. Default is text.
          */
-        "type": | 'text'
-    | 'email'
-    | 'number'
-    | 'password'
-    | 'search'
-    | 'tel'
+        "type": | 'text'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
     | 'url';
         /**
           * The default value of the input field. If defined, it will prefill the input.
@@ -689,6 +723,10 @@ export namespace Components {
         "textWrap": boolean;
     }
     interface B2bTableHeader {
+        /**
+          * Alignment of the content of the cell, by default is to the left. *
+         */
+        "contentAlign": ContentAlignment;
         /**
           * adds a border to the right of the header. *
          */
@@ -769,6 +807,10 @@ export namespace Components {
           * An optional error message that is displayed when the textarea is invalid. Per default it is undefined.
          */
         "error"?: string;
+        /**
+          * The height of the text area
+         */
+        "height"?: string;
         /**
           * An optional hint for the textarea. Per default it is undefined.
          */
@@ -800,9 +842,9 @@ export namespace Components {
         /**
           * If and how the textarea is resizable. Per default it is resizable in both directions.
          */
-        "resize"?: | 'unset'
-    | 'none'
-    | 'vertical'
+        "resize"?: | 'unset'
+    | 'none'
+    | 'vertical'
     | 'horizontal';
         /**
           * The value of the textarea. Per default it is null.
@@ -910,6 +952,14 @@ export interface B2bAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bAlertElement;
 }
+export interface B2bBreadcrumbCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bBreadcrumbElement;
+}
+export interface B2bBreadcrumbItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bBreadcrumbItemElement;
+}
 export interface B2bCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bCardElement;
@@ -922,6 +972,10 @@ export interface B2bCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bCheckboxGroupElement;
 }
+export interface B2bChipComponentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bChipComponentElement;
+}
 export interface B2bDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bDropdownElement;
@@ -995,7 +1049,18 @@ export interface B2bToggleGroupCustomEvent<T> extends CustomEvent<T> {
     target: HTMLB2bToggleGroupElement;
 }
 declare global {
+    interface HTMLB2bAlertElementEventMap {
+        "b2b-close": void;
+    }
     interface HTMLB2bAlertElement extends Components.B2bAlert, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bAlertElementEventMap>(type: K, listener: (this: HTMLB2bAlertElement, ev: B2bAlertCustomEvent<HTMLB2bAlertElementEventMap[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 HTMLB2bAlertElementEventMap>(type: K, listener: (this: HTMLB2bAlertElement, ev: B2bAlertCustomEvent<HTMLB2bAlertElementEventMap[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 HTMLB2bAlertElement: {
         prototype: HTMLB2bAlertElement;
@@ -1007,31 +1072,130 @@ declare global {
         prototype: HTMLB2bAnchorElement;
         new (): HTMLB2bAnchorElement;
     };
+    interface HTMLB2bBreadcrumbElementEventMap {
+        "b2b-selected": BreadCrumbChangeEventDetail;
+    }
+    interface HTMLB2bBreadcrumbElement extends Components.B2bBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bBreadcrumbElementEventMap>(type: K, listener: (this: HTMLB2bBreadcrumbElement, ev: B2bBreadcrumbCustomEvent<HTMLB2bBreadcrumbElementEventMap[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 HTMLB2bBreadcrumbElementEventMap>(type: K, listener: (this: HTMLB2bBreadcrumbElement, ev: B2bBreadcrumbCustomEvent<HTMLB2bBreadcrumbElementEventMap[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 HTMLB2bBreadcrumbElement: {
+        prototype: HTMLB2bBreadcrumbElement;
+        new (): HTMLB2bBreadcrumbElement;
+    };
+    interface HTMLB2bBreadcrumbItemElementEventMap {
+        "b2b-change": BreadCrumbChangeEventDetail;
+    }
+    interface HTMLB2bBreadcrumbItemElement extends Components.B2bBreadcrumbItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bBreadcrumbItemElementEventMap>(type: K, listener: (this: HTMLB2bBreadcrumbItemElement, ev: B2bBreadcrumbItemCustomEvent<HTMLB2bBreadcrumbItemElementEventMap[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 HTMLB2bBreadcrumbItemElementEventMap>(type: K, listener: (this: HTMLB2bBreadcrumbItemElement, ev: B2bBreadcrumbItemCustomEvent<HTMLB2bBreadcrumbItemElementEventMap[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 HTMLB2bBreadcrumbItemElement: {
+        prototype: HTMLB2bBreadcrumbItemElement;
+        new (): HTMLB2bBreadcrumbItemElement;
+    };
     interface HTMLB2bButtonElement extends Components.B2bButton, HTMLStencilElement {
     }
     var HTMLB2bButtonElement: {
         prototype: HTMLB2bButtonElement;
         new (): HTMLB2bButtonElement;
     };
+    interface HTMLB2bCardElementEventMap {
+        "b2b-selected": void;
+    }
     interface HTMLB2bCardElement extends Components.B2bCard, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bCardElementEventMap>(type: K, listener: (this: HTMLB2bCardElement, ev: B2bCardCustomEvent<HTMLB2bCardElementEventMap[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 HTMLB2bCardElementEventMap>(type: K, listener: (this: HTMLB2bCardElement, ev: B2bCardCustomEvent<HTMLB2bCardElementEventMap[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 HTMLB2bCardElement: {
         prototype: HTMLB2bCardElement;
         new (): HTMLB2bCardElement;
     };
+    interface HTMLB2bCheckboxElementEventMap {
+        "b2b-focus": FocusEvent;
+        "b2b-blur": FocusEvent;
+        "b2b-change": CheckboxEventDetail;
+    }
     interface HTMLB2bCheckboxElement extends Components.B2bCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bCheckboxElementEventMap>(type: K, listener: (this: HTMLB2bCheckboxElement, ev: B2bCheckboxCustomEvent<HTMLB2bCheckboxElementEventMap[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 HTMLB2bCheckboxElementEventMap>(type: K, listener: (this: HTMLB2bCheckboxElement, ev: B2bCheckboxCustomEvent<HTMLB2bCheckboxElementEventMap[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 HTMLB2bCheckboxElement: {
         prototype: HTMLB2bCheckboxElement;
         new (): HTMLB2bCheckboxElement;
     };
+    interface HTMLB2bCheckboxGroupElementEventMap {
+        "b2b-group-change": CheckboxEventDetail;
+    }
     interface HTMLB2bCheckboxGroupElement extends Components.B2bCheckboxGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLB2bCheckboxGroupElement, ev: B2bCheckboxGroupCustomEvent<HTMLB2bCheckboxGroupElementEventMap[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 HTMLB2bCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLB2bCheckboxGroupElement, ev: B2bCheckboxGroupCustomEvent<HTMLB2bCheckboxGroupElementEventMap[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 HTMLB2bCheckboxGroupElement: {
         prototype: HTMLB2bCheckboxGroupElement;
         new (): HTMLB2bCheckboxGroupElement;
     };
+    interface HTMLB2bChipComponentElementEventMap {
+        "b2b-close": ChipComponentEventDetail;
+    }
+    interface HTMLB2bChipComponentElement extends Components.B2bChipComponent, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bChipComponentElementEventMap>(type: K, listener: (this: HTMLB2bChipComponentElement, ev: B2bChipComponentCustomEvent<HTMLB2bChipComponentElementEventMap[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 HTMLB2bChipComponentElementEventMap>(type: K, listener: (this: HTMLB2bChipComponentElement, ev: B2bChipComponentCustomEvent<HTMLB2bChipComponentElementEventMap[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 HTMLB2bChipComponentElement: {
+        prototype: HTMLB2bChipComponentElement;
+        new (): HTMLB2bChipComponentElement;
+    };
+    interface HTMLB2bDropdownElementEventMap {
+        "b2b-change": string;
+        "b2b-focus": FocusEvent;
+        "b2b-blur": FocusEvent;
+    }
     interface HTMLB2bDropdownElement extends Components.B2bDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bDropdownElementEventMap>(type: K, listener: (this: HTMLB2bDropdownElement, ev: B2bDropdownCustomEvent<HTMLB2bDropdownElementEventMap[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 HTMLB2bDropdownElementEventMap>(type: K, listener: (this: HTMLB2bDropdownElement, ev: B2bDropdownCustomEvent<HTMLB2bDropdownElementEventMap[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 HTMLB2bDropdownElement: {
         prototype: HTMLB2bDropdownElement;
@@ -1071,11 +1235,24 @@ declare global {
         prototype: HTMLB2bIconElement;
         new (): HTMLB2bIconElement;
     };
+    interface HTMLB2bInputElementEventMap {
+        "b2b-focus": FocusEvent;
+        "b2b-blur": FocusEvent;
+        "b2b-input": InputChangeEvent;
+    }
     /**
      * Input component
      * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
      */
     interface HTMLB2bInputElement extends Components.B2bInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bInputElementEventMap>(type: K, listener: (this: HTMLB2bInputElement, ev: B2bInputCustomEvent<HTMLB2bInputElementEventMap[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 HTMLB2bInputElementEventMap>(type: K, listener: (this: HTMLB2bInputElement, ev: B2bInputCustomEvent<HTMLB2bInputElementEventMap[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 HTMLB2bInputElement: {
         prototype: HTMLB2bInputElement;
@@ -1093,13 +1270,35 @@ declare global {
         prototype: HTMLB2bInputLabelElement;
         new (): HTMLB2bInputLabelElement;
     };
+    interface HTMLB2bInputListElementEventMap {
+        "b2b-clear": InputClear;
+    }
     interface HTMLB2bInputListElement extends Components.B2bInputList, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bInputListElementEventMap>(type: K, listener: (this: HTMLB2bInputListElement, ev: B2bInputListCustomEvent<HTMLB2bInputListElementEventMap[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 HTMLB2bInputListElementEventMap>(type: K, listener: (this: HTMLB2bInputListElement, ev: B2bInputListCustomEvent<HTMLB2bInputListElementEventMap[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 HTMLB2bInputListElement: {
         prototype: HTMLB2bInputListElement;
         new (): HTMLB2bInputListElement;
     };
+    interface HTMLB2bInputListOptionElementEventMap {
+        "b2b-option-selected": OptionSelectedEventDetail;
+    }
     interface HTMLB2bInputListOptionElement extends Components.B2bInputListOption, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bInputListOptionElementEventMap>(type: K, listener: (this: HTMLB2bInputListOptionElement, ev: B2bInputListOptionCustomEvent<HTMLB2bInputListOptionElementEventMap[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 HTMLB2bInputListOptionElementEventMap>(type: K, listener: (this: HTMLB2bInputListOptionElement, ev: B2bInputListOptionCustomEvent<HTMLB2bInputListOptionElementEventMap[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 HTMLB2bInputListOptionElement: {
         prototype: HTMLB2bInputListOptionElement;
@@ -1111,17 +1310,40 @@ declare global {
         prototype: HTMLB2bLabelElement;
         new (): HTMLB2bLabelElement;
     };
+    interface HTMLB2bModalElementEventMap {
+        "b2b-close": void;
+        "b2b-before-close": BeforeCloseEventDetail;
+    }
     /**
      * Modal component
      * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
      */
     interface HTMLB2bModalElement extends Components.B2bModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bModalElementEventMap>(type: K, listener: (this: HTMLB2bModalElement, ev: B2bModalCustomEvent<HTMLB2bModalElementEventMap[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 HTMLB2bModalElementEventMap>(type: K, listener: (this: HTMLB2bModalElement, ev: B2bModalCustomEvent<HTMLB2bModalElementEventMap[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 HTMLB2bModalElement: {
         prototype: HTMLB2bModalElement;
         new (): HTMLB2bModalElement;
     };
+    interface HTMLB2bPaginationElementEventMap {
+        "b2b-page-change": PageChangeEventDetail;
+    }
     interface HTMLB2bPaginationElement extends Components.B2bPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bPaginationElementEventMap>(type: K, listener: (this: HTMLB2bPaginationElement, ev: B2bPaginationCustomEvent<HTMLB2bPaginationElementEventMap[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 HTMLB2bPaginationElementEventMap>(type: K, listener: (this: HTMLB2bPaginationElement, ev: B2bPaginationCustomEvent<HTMLB2bPaginationElementEventMap[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 HTMLB2bPaginationElement: {
         prototype: HTMLB2bPaginationElement;
@@ -1137,13 +1359,37 @@ declare global {
         prototype: HTMLB2bParagraphElement;
         new (): HTMLB2bParagraphElement;
     };
+    interface HTMLB2bRadioButtonElementEventMap {
+        "b2b-focus": FocusEvent;
+        "b2b-blur": FocusEvent;
+        "b2b-change": RadioEventDetail;
+    }
     interface HTMLB2bRadioButtonElement extends Components.B2bRadioButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bRadioButtonElementEventMap>(type: K, listener: (this: HTMLB2bRadioButtonElement, ev: B2bRadioButtonCustomEvent<HTMLB2bRadioButtonElementEventMap[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 HTMLB2bRadioButtonElementEventMap>(type: K, listener: (this: HTMLB2bRadioButtonElement, ev: B2bRadioButtonCustomEvent<HTMLB2bRadioButtonElementEventMap[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 HTMLB2bRadioButtonElement: {
         prototype: HTMLB2bRadioButtonElement;
         new (): HTMLB2bRadioButtonElement;
     };
+    interface HTMLB2bRadioGroupElementEventMap {
+        "b2b-group-change": RadioEventDetail;
+    }
     interface HTMLB2bRadioGroupElement extends Components.B2bRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bRadioGroupElementEventMap>(type: K, listener: (this: HTMLB2bRadioGroupElement, ev: B2bRadioGroupCustomEvent<HTMLB2bRadioGroupElementEventMap[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 HTMLB2bRadioGroupElementEventMap>(type: K, listener: (this: HTMLB2bRadioGroupElement, ev: B2bRadioGroupCustomEvent<HTMLB2bRadioGroupElementEventMap[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 HTMLB2bRadioGroupElement: {
         prototype: HTMLB2bRadioGroupElement;
@@ -1167,7 +1413,18 @@ declare global {
         prototype: HTMLB2bScrollableContainerElement;
         new (): HTMLB2bScrollableContainerElement;
     };
+    interface HTMLB2bSearchElementEventMap {
+        "b2b-search": SearchClickEventDetail;
+    }
     interface HTMLB2bSearchElement extends Components.B2bSearch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bSearchElementEventMap>(type: K, listener: (this: HTMLB2bSearchElement, ev: B2bSearchCustomEvent<HTMLB2bSearchElementEventMap[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 HTMLB2bSearchElementEventMap>(type: K, listener: (this: HTMLB2bSearchElement, ev: B2bSearchCustomEvent<HTMLB2bSearchElementEventMap[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 HTMLB2bSearchElement: {
         prototype: HTMLB2bSearchElement;
@@ -1189,13 +1446,35 @@ declare global {
         prototype: HTMLB2bSpinnerElement;
         new (): HTMLB2bSpinnerElement;
     };
+    interface HTMLB2bTabElementEventMap {
+        "b2b-change": boolean;
+    }
     interface HTMLB2bTabElement extends Components.B2bTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTabElementEventMap>(type: K, listener: (this: HTMLB2bTabElement, ev: B2bTabCustomEvent<HTMLB2bTabElementEventMap[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 HTMLB2bTabElementEventMap>(type: K, listener: (this: HTMLB2bTabElement, ev: B2bTabCustomEvent<HTMLB2bTabElementEventMap[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 HTMLB2bTabElement: {
         prototype: HTMLB2bTabElement;
         new (): HTMLB2bTabElement;
     };
+    interface HTMLB2bTabGroupElementEventMap {
+        "b2b-selected": TabChangeEventDetail;
+    }
     interface HTMLB2bTabGroupElement extends Components.B2bTabGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTabGroupElementEventMap>(type: K, listener: (this: HTMLB2bTabGroupElement, ev: B2bTabGroupCustomEvent<HTMLB2bTabGroupElementEventMap[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 HTMLB2bTabGroupElementEventMap>(type: K, listener: (this: HTMLB2bTabGroupElement, ev: B2bTabGroupCustomEvent<HTMLB2bTabGroupElementEventMap[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 HTMLB2bTabGroupElement: {
         prototype: HTMLB2bTabGroupElement;
@@ -1207,7 +1486,18 @@ declare global {
         prototype: HTMLB2bTabPanelElement;
         new (): HTMLB2bTabPanelElement;
     };
+    interface HTMLB2bTableElementEventMap {
+        "b2b-sort-change": ColumnSortChangeEventDetail;
+    }
     interface HTMLB2bTableElement extends Components.B2bTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTableElementEventMap>(type: K, listener: (this: HTMLB2bTableElement, ev: B2bTableCustomEvent<HTMLB2bTableElementEventMap[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 HTMLB2bTableElementEventMap>(type: K, listener: (this: HTMLB2bTableElement, ev: B2bTableCustomEvent<HTMLB2bTableElementEventMap[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 HTMLB2bTableElement: {
         prototype: HTMLB2bTableElement;
@@ -1219,41 +1509,110 @@ declare global {
         prototype: HTMLB2bTableCellElement;
         new (): HTMLB2bTableCellElement;
     };
+    interface HTMLB2bTableHeaderElementEventMap {
+        "b2b-change": TableSortDirections;
+    }
     interface HTMLB2bTableHeaderElement extends Components.B2bTableHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTableHeaderElementEventMap>(type: K, listener: (this: HTMLB2bTableHeaderElement, ev: B2bTableHeaderCustomEvent<HTMLB2bTableHeaderElementEventMap[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 HTMLB2bTableHeaderElementEventMap>(type: K, listener: (this: HTMLB2bTableHeaderElement, ev: B2bTableHeaderCustomEvent<HTMLB2bTableHeaderElementEventMap[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 HTMLB2bTableHeaderElement: {
         prototype: HTMLB2bTableHeaderElement;
         new (): HTMLB2bTableHeaderElement;
     };
+    interface HTMLB2bTableRowElementEventMap {
+        "b2b-open": boolean;
+        "b2b-row-selected": CheckboxEventDetail1;
+    }
     interface HTMLB2bTableRowElement extends Components.B2bTableRow, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTableRowElementEventMap>(type: K, listener: (this: HTMLB2bTableRowElement, ev: B2bTableRowCustomEvent<HTMLB2bTableRowElementEventMap[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 HTMLB2bTableRowElementEventMap>(type: K, listener: (this: HTMLB2bTableRowElement, ev: B2bTableRowCustomEvent<HTMLB2bTableRowElementEventMap[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 HTMLB2bTableRowElement: {
         prototype: HTMLB2bTableRowElement;
         new (): HTMLB2bTableRowElement;
     };
+    interface HTMLB2bTableRowgroupElementEventMap {
+        "b2b-group-selected": TableAccordionSelectedEventDetail;
+    }
     interface HTMLB2bTableRowgroupElement extends Components.B2bTableRowgroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTableRowgroupElementEventMap>(type: K, listener: (this: HTMLB2bTableRowgroupElement, ev: B2bTableRowgroupCustomEvent<HTMLB2bTableRowgroupElementEventMap[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 HTMLB2bTableRowgroupElementEventMap>(type: K, listener: (this: HTMLB2bTableRowgroupElement, ev: B2bTableRowgroupCustomEvent<HTMLB2bTableRowgroupElementEventMap[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 HTMLB2bTableRowgroupElement: {
         prototype: HTMLB2bTableRowgroupElement;
         new (): HTMLB2bTableRowgroupElement;
     };
+    interface HTMLB2bTextareaElementEventMap {
+        "b2b-focus": FocusEvent;
+        "b2b-blur": FocusEvent;
+        "b2b-input": InputChangeEvent;
+    }
     /**
      * Text Area Component
      * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
      */
     interface HTMLB2bTextareaElement extends Components.B2bTextarea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTextareaElementEventMap>(type: K, listener: (this: HTMLB2bTextareaElement, ev: B2bTextareaCustomEvent<HTMLB2bTextareaElementEventMap[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 HTMLB2bTextareaElementEventMap>(type: K, listener: (this: HTMLB2bTextareaElement, ev: B2bTextareaCustomEvent<HTMLB2bTextareaElementEventMap[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 HTMLB2bTextareaElement: {
         prototype: HTMLB2bTextareaElement;
         new (): HTMLB2bTextareaElement;
     };
+    interface HTMLB2bToggleButtonElementEventMap {
+        "b2b-change": ToggleButtonEventDetail;
+    }
     interface HTMLB2bToggleButtonElement extends Components.B2bToggleButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bToggleButtonElementEventMap>(type: K, listener: (this: HTMLB2bToggleButtonElement, ev: B2bToggleButtonCustomEvent<HTMLB2bToggleButtonElementEventMap[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 HTMLB2bToggleButtonElementEventMap>(type: K, listener: (this: HTMLB2bToggleButtonElement, ev: B2bToggleButtonCustomEvent<HTMLB2bToggleButtonElementEventMap[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 HTMLB2bToggleButtonElement: {
         prototype: HTMLB2bToggleButtonElement;
         new (): HTMLB2bToggleButtonElement;
     };
+    interface HTMLB2bToggleGroupElementEventMap {
+        "b2b-group-change": ToggleButtonEventDetail;
+    }
     interface HTMLB2bToggleGroupElement extends Components.B2bToggleGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bToggleGroupElementEventMap>(type: K, listener: (this: HTMLB2bToggleGroupElement, ev: B2bToggleGroupCustomEvent<HTMLB2bToggleGroupElementEventMap[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 HTMLB2bToggleGroupElementEventMap>(type: K, listener: (this: HTMLB2bToggleGroupElement, ev: B2bToggleGroupCustomEvent<HTMLB2bToggleGroupElementEventMap[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 HTMLB2bToggleGroupElement: {
         prototype: HTMLB2bToggleGroupElement;
@@ -1290,10 +1649,13 @@ declare global {
     interface HTMLElementTagNameMap {
         "b2b-alert": HTMLB2bAlertElement;
         "b2b-anchor": HTMLB2bAnchorElement;
+        "b2b-breadcrumb": HTMLB2bBreadcrumbElement;
+        "b2b-breadcrumb-item": HTMLB2bBreadcrumbItemElement;
         "b2b-button": HTMLB2bButtonElement;
         "b2b-card": HTMLB2bCardElement;
         "b2b-checkbox": HTMLB2bCheckboxElement;
         "b2b-checkbox-group": HTMLB2bCheckboxGroupElement;
+        "b2b-chip-component": HTMLB2bChipComponentElement;
         "b2b-dropdown": HTMLB2bDropdownElement;
         "b2b-grid": HTMLB2bGridElement;
         "b2b-grid-col": HTMLB2bGridColElement;
@@ -1379,6 +1741,26 @@ declare namespace LocalJSX {
          */
         "target"?: 'self' | 'blank' | 'parent' | 'top';
     }
+    interface B2bBreadcrumb {
+        /**
+          * Emits the value of the currently selected item whenever an item is selected.
+         */
+        "onB2b-selected"?: (event: B2bBreadcrumbCustomEvent<BreadCrumbChangeEventDetail>) => void;
+    }
+    interface B2bBreadcrumbItem {
+        /**
+          * If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state.
+         */
+        "active"?: boolean;
+        /**
+          * If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked.
+         */
+        "href"?: string;
+        /**
+          * The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar.
+         */
+        "value": any;
+    }
     interface B2bButton {
         /**
           * Whether the button is currently active. Set to true when using the button to signify a permanent active state
@@ -1527,6 +1909,28 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
     }
+    interface B2bChipComponent {
+        /**
+          * Whether the chip is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether or not the chip component has a close button. Per default it is true.
+         */
+        "hasCloseButton"?: boolean;
+        /**
+          * The text content of the chip. It is required.
+         */
+        "label": string;
+        /**
+          * This event will be triggered when the chip element is closed
+         */
+        "onB2b-close"?: (event: B2bChipComponentCustomEvent<ChipComponentEventDetail>) => void;
+        /**
+          * It is only used when the chip component participates in a group
+         */
+        "value"?: any;
+    }
     interface B2bDropdown {
         /**
           * Whether the select as a whole is disabled. Per default it is false.
@@ -1579,17 +1983,17 @@ declare namespace LocalJSX {
         /**
           * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row.
          */
-        "span"?: | 1
-    | 2
-    | 3
-    | 4
-    | 5
-    | 6
-    | 7
-    | 8
-    | 9
-    | 10
-    | 11
+        "span"?: | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | 7
+    | 8
+    | 9
+    | 10
+    | 11
     | 12;
         /**
           * The alignment of text placed inside of a column. Note that this will apply to all children.
@@ -1608,11 +2012,11 @@ declare namespace LocalJSX {
         /**
           * Horizontal alignment of columns.
          */
-        "justify"?: | 'start'
-    | 'end'
-    | 'center'
-    | 'space-around'
-    | 'space-between'
+        "justify"?: | 'start'
+    | 'end'
+    | 'center'
+    | 'space-around'
+    | 'space-between'
     | 'space-evenly';
         /**
           * The spacing between individual rows in px.
@@ -1711,12 +2115,12 @@ declare namespace LocalJSX {
         /**
           * The type of the input. All native HTML types except date or month are supported. Default is text.
          */
-        "type"?: | 'text'
-    | 'email'
-    | 'number'
-    | 'password'
-    | 'search'
-    | 'tel'
+        "type"?: | 'text'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
     | 'url';
         /**
           * The default value of the input field. If defined, it will prefill the input.
@@ -2086,6 +2490,10 @@ declare namespace LocalJSX {
         "textWrap"?: boolean;
     }
     interface B2bTableHeader {
+        /**
+          * Alignment of the content of the cell, by default is to the left. *
+         */
+        "contentAlign"?: ContentAlignment;
         /**
           * adds a border to the right of the header. *
          */
@@ -2176,6 +2584,10 @@ declare namespace LocalJSX {
           * An optional error message that is displayed when the textarea is invalid. Per default it is undefined.
          */
         "error"?: string;
+        /**
+          * The height of the text area
+         */
+        "height"?: string;
         /**
           * An optional hint for the textarea. Per default it is undefined.
          */
@@ -2219,9 +2631,9 @@ declare namespace LocalJSX {
         /**
           * If and how the textarea is resizable. Per default it is resizable in both directions.
          */
-        "resize"?: | 'unset'
-    | 'none'
-    | 'vertical'
+        "resize"?: | 'unset'
+    | 'none'
+    | 'vertical'
     | 'horizontal';
         /**
           * The value of the textarea. Per default it is null.
@@ -2335,10 +2747,13 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "b2b-alert": B2bAlert;
         "b2b-anchor": B2bAnchor;
+        "b2b-breadcrumb": B2bBreadcrumb;
+        "b2b-breadcrumb-item": B2bBreadcrumbItem;
         "b2b-button": B2bButton;
         "b2b-card": B2bCard;
         "b2b-checkbox": B2bCheckbox;
         "b2b-checkbox-group": B2bCheckboxGroup;
+        "b2b-chip-component": B2bChipComponent;
         "b2b-dropdown": B2bDropdown;
         "b2b-grid": B2bGrid;
         "b2b-grid-col": B2bGridCol;
@@ -2385,10 +2800,13 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "b2b-alert": LocalJSX.B2bAlert & JSXBase.HTMLAttributes<HTMLB2bAlertElement>;
             "b2b-anchor": LocalJSX.B2bAnchor & JSXBase.HTMLAttributes<HTMLB2bAnchorElement>;
+            "b2b-breadcrumb": LocalJSX.B2bBreadcrumb & JSXBase.HTMLAttributes<HTMLB2bBreadcrumbElement>;
+            "b2b-breadcrumb-item": LocalJSX.B2bBreadcrumbItem & JSXBase.HTMLAttributes<HTMLB2bBreadcrumbItemElement>;
             "b2b-button": LocalJSX.B2bButton & JSXBase.HTMLAttributes<HTMLB2bButtonElement>;
             "b2b-card": LocalJSX.B2bCard & JSXBase.HTMLAttributes<HTMLB2bCardElement>;
             "b2b-checkbox": LocalJSX.B2bCheckbox & JSXBase.HTMLAttributes<HTMLB2bCheckboxElement>;
             "b2b-checkbox-group": LocalJSX.B2bCheckboxGroup & JSXBase.HTMLAttributes<HTMLB2bCheckboxGroupElement>;
+            "b2b-chip-component": LocalJSX.B2bChipComponent & JSXBase.HTMLAttributes<HTMLB2bChipComponentElement>;
             "b2b-dropdown": LocalJSX.B2bDropdown & JSXBase.HTMLAttributes<HTMLB2bDropdownElement>;
             "b2b-grid": LocalJSX.B2bGrid & JSXBase.HTMLAttributes<HTMLB2bGridElement>;
             "b2b-grid-col": LocalJSX.B2bGridCol & JSXBase.HTMLAttributes<HTMLB2bGridColElement>;