@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

package/dist/types/components.d.ts

@@ -5,17 +5,19 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-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 { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
+import { CheckboxEventDetail, ChipComponentEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 import { IconName } from "./components/icon/types";
+import { IconName as IconName1 } from "./components/icon-100/types";
 import { BeforeCloseEventDetail } from "./utils/interfaces/status.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 { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
-export { CheckboxEventDetail, ChipComponentEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
+export { CheckboxEventDetail, ChipComponentEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 export { IconName } from "./components/icon/types";
+export { IconName as IconName1 } from "./components/icon-100/types";
 export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 export { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
 export { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
@@ -120,6 +122,10 @@ export namespace Components {
           * The button variant. If not specified, the button will be the secondary variant.
          */
         "variant": 'primary' | 'secondary';
+        /**
+          * The width of the button. Per default, it will fit the content
+         */
+        "width": 'fit-content' | 'fit-container' | 'custom';
     }
     interface B2bCard {
         /**
@@ -260,6 +266,23 @@ export namespace Components {
          */
         "required": boolean;
     }
+    interface B2bFlyoutMenu {
+        "opened": boolean;
+    }
+    interface B2bFlyoutMenuOption {
+        /**
+          * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected.
+         */
+        "disabled": boolean;
+        /**
+          * The option name.
+         */
+        "option": string;
+        /**
+          * Whether the option has a separator at the bottom. Per default it is false.
+         */
+        "separator": boolean;
+    }
     interface B2bGrid {
         /**
           * The inner padding of the grid container measured in px.
@@ -337,15 +360,41 @@ export namespace Components {
           * The color of the icon
          */
         "color": 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu.
+         */
+        "focusable": boolean;
         /**
           * The name of the icon
          */
         "icon": IconName;
         /**
-          * The size of the icon
+          * @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components.
          */
         "size": '50' | '100' | '200';
     }
+    interface B2bIcon100 {
+        /**
+          * Will display a pointer cursor when hovering the icon
+         */
+        "clickable": boolean;
+        /**
+          * The color of the icon
+         */
+        "color": 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu.
+         */
+        "focusable": boolean;
+        /**
+          * The name of the icon
+         */
+        "icon": IconName1;
+        /**
+          * The size of the icon in pixel. Minimum is 24, maximum is 96px.
+         */
+        "size": number;
+    }
     /**
      * Input component
      * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
@@ -504,6 +553,43 @@ export namespace Components {
          */
         "variant": 'default' | 'large';
     }
+    interface B2bMultiselectDropdown {
+        /**
+          * The input label.
+         */
+        "label": string;
+        /**
+          * The maximum amount of chips visible. Adjust this depending on available size of the dropdown.
+         */
+        "maxOptionsVisible": number;
+        /**
+          * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
+         */
+        "optionsList": string[];
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder": string;
+        /**
+          * The placeholder shown in the search bar.
+         */
+        "searchPlaceholder": string;
+        /**
+          * The string displayed as the select all label.
+         */
+        "selectAllLabel": string;
+    }
+    interface B2bMultiselectOption {
+        "indeterminate"?: boolean;
+        /**
+          * The label of the option.
+         */
+        "option": string;
+        /**
+          * Whether the option is currently selected.
+         */
+        "selected": boolean;
+    }
     interface B2bPagination {
         /**
           * Use this property to set programmatically the active page
@@ -540,6 +626,24 @@ export namespace Components {
          */
         "weight": 'bold' | 'normal';
     }
+    interface B2bProgressBar {
+        /**
+          * The label of the progress bar.
+         */
+        "label"?: string;
+        /**
+          * Whether the label should be displayed on the right or left of the progress bar.
+         */
+        "labelPosition"?: 'left' | 'right';
+        /**
+          * Whether the label should be displayed below or on the side of the progress bar.
+         */
+        "labelType"?: 'below' | 'side';
+        /**
+          * The percentage of progress from 0 to 100.
+         */
+        "progress": number;
+    }
     interface B2bRadioButton {
         /**
           * Whether or not the radio button is currently checked. Per default it is false.
@@ -696,7 +800,7 @@ export namespace Components {
     }
     interface B2bTable {
         /**
-          * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns.
+          * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns. Colspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells to make them span more than one column.
          */
         "size": TableSizes;
     }
@@ -710,19 +814,25 @@ export namespace Components {
          */
         "color": TableColourOptions;
         /**
-          * adds a border to the right of the cell. *
+          * How many columns the cell should span. Accepts numbers greater than one.
          */
-        "divider": boolean;
+        "colspan"?: number;
         /**
-          * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation.
+          * adds a border to the right of the cell. *
          */
+        "divider": boolean;
         "size": TableSizes;
         /**
           * Whether text should wrap or truncate. It will only truncate when table size is equal *
          */
         "textWrap": boolean;
+        "totalCols"?: number;
     }
     interface B2bTableHeader {
+        /**
+          * The width of the column. Increase it to change the size of the column relative to other columns.
+         */
+        "colspan"?: number;
         /**
           * Alignment of the content of the cell, by default is to the left. *
          */
@@ -732,9 +842,13 @@ export namespace Components {
          */
         "divider": boolean;
         /**
-          * sets the header position to sticky. Use it when table is inside a scrollable container. *
+          * @deprecated Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. *
          */
         "fixed": boolean;
+        /**
+          * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation.
+         */
+        "size": TableSizes;
         /**
           * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this.
          */
@@ -743,6 +857,7 @@ export namespace Components {
           * Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent.
          */
         "sortId"?: string;
+        "totalCols"?: number;
     }
     interface B2bTableRow {
         "accordionType": TableAccordionRowTypes;
@@ -763,6 +878,7 @@ export namespace Components {
          */
         "indeterminate": boolean;
         "selectable": boolean;
+        "size"?: TableSizes;
         /**
           * Will toggle the accordion opened or closed.
          */
@@ -777,6 +893,10 @@ export namespace Components {
           * Renders the rowgroup as an accordion. Both header and body must have accordion set to true. One table can contain multiple rowgroups of type body, each of which represents an accordion row with children.
          */
         "accordion": boolean;
+        /**
+          * Sets the header rowgroup position to sticky. Use this in a scrollable container.
+         */
+        "fixed": boolean;
         /**
           * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false.
          */
@@ -785,6 +905,7 @@ export namespace Components {
           * If the rows in the rowgroup can be selected via checkmark. Per default, it is false.
          */
         "selectable": boolean;
+        "size": TableSizes;
         /**
           * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over.
          */
@@ -873,6 +994,32 @@ export namespace Components {
          */
         "value": string;
     }
+    interface B2bToggleChip {
+        /**
+          * Whether or not the chip is currently active. Per default, it is false.
+         */
+        "active": boolean;
+        /**
+          * Whether or not the chip is currently disabled. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * The chip's label. This is required.
+         */
+        "label": string;
+        /**
+          * The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required.
+         */
+        "name": string;
+        /**
+          * The value associated with the toggle chip. This is emitted when the chip is interacted with.
+         */
+        "value": any;
+        /**
+          * The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey
+         */
+        "variant": 'grey' | 'white';
+    }
     interface B2bToggleGroup {
         /**
           * Whether or not the toggle group is disabled as a whole. Per default it is false.
@@ -883,6 +1030,28 @@ export namespace Components {
          */
         "name": string;
     }
+    interface B2bToggleSwitch {
+        /**
+          * Whether or not the toggle button is currently disabled. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * An optional label for the toggle switch.
+         */
+        "label"?: string;
+        /**
+          * The alignment of the toggle switch label.
+         */
+        "labelPosition": 'left' | 'right';
+        /**
+          * The toggle name. Use this if the toggle switch is used in a form group.
+         */
+        "name"?: string;
+        /**
+          * Whether or not the toggle button is currently on or off. Per default it is off.
+         */
+        "state": boolean;
+    }
     /**
      * The tooltip can display additional information, and will be visible based on
      * a specific trigger.
@@ -980,6 +1149,10 @@ export interface B2bDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bDropdownElement;
 }
+export interface B2bFlyoutMenuOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bFlyoutMenuOptionElement;
+}
 export interface B2bInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bInputElement;
@@ -996,6 +1169,14 @@ export interface B2bModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bModalElement;
 }
+export interface B2bMultiselectDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bMultiselectDropdownElement;
+}
+export interface B2bMultiselectOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bMultiselectOptionElement;
+}
 export interface B2bPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bPaginationElement;
@@ -1044,10 +1225,18 @@ export interface B2bToggleButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bToggleButtonElement;
 }
+export interface B2bToggleChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bToggleChipElement;
+}
 export interface B2bToggleGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bToggleGroupElement;
 }
+export interface B2bToggleSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bToggleSwitchElement;
+}
 declare global {
     interface HTMLB2bAlertElementEventMap {
         "b2b-close": void;
@@ -1201,6 +1390,29 @@ declare global {
         prototype: HTMLB2bDropdownElement;
         new (): HTMLB2bDropdownElement;
     };
+    interface HTMLB2bFlyoutMenuElement extends Components.B2bFlyoutMenu, HTMLStencilElement {
+    }
+    var HTMLB2bFlyoutMenuElement: {
+        prototype: HTMLB2bFlyoutMenuElement;
+        new (): HTMLB2bFlyoutMenuElement;
+    };
+    interface HTMLB2bFlyoutMenuOptionElementEventMap {
+        "b2b-option-selected": OptionSelectedEventDetail;
+    }
+    interface HTMLB2bFlyoutMenuOptionElement extends Components.B2bFlyoutMenuOption, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bFlyoutMenuOptionElementEventMap>(type: K, listener: (this: HTMLB2bFlyoutMenuOptionElement, ev: B2bFlyoutMenuOptionCustomEvent<HTMLB2bFlyoutMenuOptionElementEventMap[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 HTMLB2bFlyoutMenuOptionElementEventMap>(type: K, listener: (this: HTMLB2bFlyoutMenuOptionElement, ev: B2bFlyoutMenuOptionCustomEvent<HTMLB2bFlyoutMenuOptionElementEventMap[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 HTMLB2bFlyoutMenuOptionElement: {
+        prototype: HTMLB2bFlyoutMenuOptionElement;
+        new (): HTMLB2bFlyoutMenuOptionElement;
+    };
     interface HTMLB2bGridElement extends Components.B2bGrid, HTMLStencilElement {
     }
     var HTMLB2bGridElement: {
@@ -1235,6 +1447,12 @@ declare global {
         prototype: HTMLB2bIconElement;
         new (): HTMLB2bIconElement;
     };
+    interface HTMLB2bIcon100Element extends Components.B2bIcon100, HTMLStencilElement {
+    }
+    var HTMLB2bIcon100Element: {
+        prototype: HTMLB2bIcon100Element;
+        new (): HTMLB2bIcon100Element;
+    };
     interface HTMLB2bInputElementEventMap {
         "b2b-focus": FocusEvent;
         "b2b-blur": FocusEvent;
@@ -1332,6 +1550,40 @@ declare global {
         prototype: HTMLB2bModalElement;
         new (): HTMLB2bModalElement;
     };
+    interface HTMLB2bMultiselectDropdownElementEventMap {
+        "b2b-selected": string[];
+    }
+    interface HTMLB2bMultiselectDropdownElement extends Components.B2bMultiselectDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bMultiselectDropdownElementEventMap>(type: K, listener: (this: HTMLB2bMultiselectDropdownElement, ev: B2bMultiselectDropdownCustomEvent<HTMLB2bMultiselectDropdownElementEventMap[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 HTMLB2bMultiselectDropdownElementEventMap>(type: K, listener: (this: HTMLB2bMultiselectDropdownElement, ev: B2bMultiselectDropdownCustomEvent<HTMLB2bMultiselectDropdownElementEventMap[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 HTMLB2bMultiselectDropdownElement: {
+        prototype: HTMLB2bMultiselectDropdownElement;
+        new (): HTMLB2bMultiselectDropdownElement;
+    };
+    interface HTMLB2bMultiselectOptionElementEventMap {
+        "b2b-option-selected": MultiSelectOptionEventDetail;
+    }
+    interface HTMLB2bMultiselectOptionElement extends Components.B2bMultiselectOption, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bMultiselectOptionElementEventMap>(type: K, listener: (this: HTMLB2bMultiselectOptionElement, ev: B2bMultiselectOptionCustomEvent<HTMLB2bMultiselectOptionElementEventMap[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 HTMLB2bMultiselectOptionElementEventMap>(type: K, listener: (this: HTMLB2bMultiselectOptionElement, ev: B2bMultiselectOptionCustomEvent<HTMLB2bMultiselectOptionElementEventMap[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 HTMLB2bMultiselectOptionElement: {
+        prototype: HTMLB2bMultiselectOptionElement;
+        new (): HTMLB2bMultiselectOptionElement;
+    };
     interface HTMLB2bPaginationElementEventMap {
         "b2b-page-change": PageChangeEventDetail;
     }
@@ -1359,6 +1611,12 @@ declare global {
         prototype: HTMLB2bParagraphElement;
         new (): HTMLB2bParagraphElement;
     };
+    interface HTMLB2bProgressBarElement extends Components.B2bProgressBar, HTMLStencilElement {
+    }
+    var HTMLB2bProgressBarElement: {
+        prototype: HTMLB2bProgressBarElement;
+        new (): HTMLB2bProgressBarElement;
+    };
     interface HTMLB2bRadioButtonElementEventMap {
         "b2b-focus": FocusEvent;
         "b2b-blur": FocusEvent;
@@ -1601,6 +1859,23 @@ declare global {
         prototype: HTMLB2bToggleButtonElement;
         new (): HTMLB2bToggleButtonElement;
     };
+    interface HTMLB2bToggleChipElementEventMap {
+        "b2b-selected": ToggleChipEventDetail;
+    }
+    interface HTMLB2bToggleChipElement extends Components.B2bToggleChip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bToggleChipElementEventMap>(type: K, listener: (this: HTMLB2bToggleChipElement, ev: B2bToggleChipCustomEvent<HTMLB2bToggleChipElementEventMap[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 HTMLB2bToggleChipElementEventMap>(type: K, listener: (this: HTMLB2bToggleChipElement, ev: B2bToggleChipCustomEvent<HTMLB2bToggleChipElementEventMap[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 HTMLB2bToggleChipElement: {
+        prototype: HTMLB2bToggleChipElement;
+        new (): HTMLB2bToggleChipElement;
+    };
     interface HTMLB2bToggleGroupElementEventMap {
         "b2b-group-change": ToggleButtonEventDetail;
     }
@@ -1618,6 +1893,23 @@ declare global {
         prototype: HTMLB2bToggleGroupElement;
         new (): HTMLB2bToggleGroupElement;
     };
+    interface HTMLB2bToggleSwitchElementEventMap {
+        "b2b-change": ToggleSwitchEventDetail;
+    }
+    interface HTMLB2bToggleSwitchElement extends Components.B2bToggleSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bToggleSwitchElementEventMap>(type: K, listener: (this: HTMLB2bToggleSwitchElement, ev: B2bToggleSwitchCustomEvent<HTMLB2bToggleSwitchElementEventMap[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 HTMLB2bToggleSwitchElementEventMap>(type: K, listener: (this: HTMLB2bToggleSwitchElement, ev: B2bToggleSwitchCustomEvent<HTMLB2bToggleSwitchElementEventMap[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 HTMLB2bToggleSwitchElement: {
+        prototype: HTMLB2bToggleSwitchElement;
+        new (): HTMLB2bToggleSwitchElement;
+    };
     /**
      * The tooltip can display additional information, and will be visible based on
      * a specific trigger.
@@ -1657,11 +1949,14 @@ declare global {
         "b2b-checkbox-group": HTMLB2bCheckboxGroupElement;
         "b2b-chip-component": HTMLB2bChipComponentElement;
         "b2b-dropdown": HTMLB2bDropdownElement;
+        "b2b-flyout-menu": HTMLB2bFlyoutMenuElement;
+        "b2b-flyout-menu-option": HTMLB2bFlyoutMenuOptionElement;
         "b2b-grid": HTMLB2bGridElement;
         "b2b-grid-col": HTMLB2bGridColElement;
         "b2b-grid-row": HTMLB2bGridRowElement;
         "b2b-headline": HTMLB2bHeadlineElement;
         "b2b-icon": HTMLB2bIconElement;
+        "b2b-icon-100": HTMLB2bIcon100Element;
         "b2b-input": HTMLB2bInputElement;
         "b2b-input-group": HTMLB2bInputGroupElement;
         "b2b-input-label": HTMLB2bInputLabelElement;
@@ -1669,8 +1964,11 @@ declare global {
         "b2b-input-list-option": HTMLB2bInputListOptionElement;
         "b2b-label": HTMLB2bLabelElement;
         "b2b-modal": HTMLB2bModalElement;
+        "b2b-multiselect-dropdown": HTMLB2bMultiselectDropdownElement;
+        "b2b-multiselect-option": HTMLB2bMultiselectOptionElement;
         "b2b-pagination": HTMLB2bPaginationElement;
         "b2b-paragraph": HTMLB2bParagraphElement;
+        "b2b-progress-bar": HTMLB2bProgressBarElement;
         "b2b-radio-button": HTMLB2bRadioButtonElement;
         "b2b-radio-group": HTMLB2bRadioGroupElement;
         "b2b-required-separator": HTMLB2bRequiredSeparatorElement;
@@ -1689,7 +1987,9 @@ declare global {
         "b2b-table-rowgroup": HTMLB2bTableRowgroupElement;
         "b2b-textarea": HTMLB2bTextareaElement;
         "b2b-toggle-button": HTMLB2bToggleButtonElement;
+        "b2b-toggle-chip": HTMLB2bToggleChipElement;
         "b2b-toggle-group": HTMLB2bToggleGroupElement;
+        "b2b-toggle-switch": HTMLB2bToggleSwitchElement;
         "b2b-tooltip": HTMLB2bTooltipElement;
         "b2b-wizard": HTMLB2bWizardElement;
         "b2b-wizard-icon": HTMLB2bWizardIconElement;
@@ -1798,6 +2098,10 @@ declare namespace LocalJSX {
           * The button variant. If not specified, the button will be the secondary variant.
          */
         "variant"?: 'primary' | 'secondary';
+        /**
+          * The width of the button. Per default, it will fit the content
+         */
+        "width"?: 'fit-content' | 'fit-container' | 'custom';
     }
     interface B2bCard {
         /**
@@ -1973,6 +2277,26 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
     }
+    interface B2bFlyoutMenu {
+    }
+    interface B2bFlyoutMenuOption {
+        /**
+          * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emits the option as a string whenever an option is selected.
+         */
+        "onB2b-option-selected"?: (event: B2bFlyoutMenuOptionCustomEvent<OptionSelectedEventDetail>) => void;
+        /**
+          * The option name.
+         */
+        "option": string;
+        /**
+          * Whether the option has a separator at the bottom. Per default it is false.
+         */
+        "separator"?: boolean;
+    }
     interface B2bGrid {
         /**
           * The inner padding of the grid container measured in px.
@@ -2050,15 +2374,41 @@ declare namespace LocalJSX {
           * The color of the icon
          */
         "color"?: 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu.
+         */
+        "focusable"?: boolean;
         /**
           * The name of the icon
          */
         "icon"?: IconName;
         /**
-          * The size of the icon
+          * @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components.
          */
         "size"?: '50' | '100' | '200';
     }
+    interface B2bIcon100 {
+        /**
+          * Will display a pointer cursor when hovering the icon
+         */
+        "clickable"?: boolean;
+        /**
+          * The color of the icon
+         */
+        "color"?: 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu.
+         */
+        "focusable"?: boolean;
+        /**
+          * The name of the icon
+         */
+        "icon"?: IconName1;
+        /**
+          * The size of the icon in pixel. Minimum is 24, maximum is 96px.
+         */
+        "size"?: number;
+    }
     /**
      * Input component
      * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
@@ -2235,6 +2585,50 @@ declare namespace LocalJSX {
          */
         "variant"?: 'default' | 'large';
     }
+    interface B2bMultiselectDropdown {
+        /**
+          * The input label.
+         */
+        "label": string;
+        /**
+          * The maximum amount of chips visible. Adjust this depending on available size of the dropdown.
+         */
+        "maxOptionsVisible"?: number;
+        /**
+          * Emits when there is a change to the currently selected values.
+         */
+        "onB2b-selected"?: (event: B2bMultiselectDropdownCustomEvent<string[]>) => void;
+        /**
+          * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
+         */
+        "optionsList"?: string[];
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder"?: string;
+        /**
+          * The placeholder shown in the search bar.
+         */
+        "searchPlaceholder"?: string;
+        /**
+          * The string displayed as the select all label.
+         */
+        "selectAllLabel"?: string;
+    }
+    interface B2bMultiselectOption {
+        /**
+          * Emits the option as a string whenever an option is selected.
+         */
+        "onB2b-option-selected"?: (event: B2bMultiselectOptionCustomEvent<MultiSelectOptionEventDetail>) => void;
+        /**
+          * The label of the option.
+         */
+        "option": string;
+        /**
+          * Whether the option is currently selected.
+         */
+        "selected"?: boolean;
+    }
     interface B2bPagination {
         /**
           * Use this property to set programmatically the active page
@@ -2275,6 +2669,24 @@ declare namespace LocalJSX {
          */
         "weight"?: 'bold' | 'normal';
     }
+    interface B2bProgressBar {
+        /**
+          * The label of the progress bar.
+         */
+        "label"?: string;
+        /**
+          * Whether the label should be displayed on the right or left of the progress bar.
+         */
+        "labelPosition"?: 'left' | 'right';
+        /**
+          * Whether the label should be displayed below or on the side of the progress bar.
+         */
+        "labelType"?: 'below' | 'side';
+        /**
+          * The percentage of progress from 0 to 100.
+         */
+        "progress"?: number;
+    }
     interface B2bRadioButton {
         /**
           * Whether or not the radio button is currently checked. Per default it is false.
@@ -2463,7 +2875,7 @@ declare namespace LocalJSX {
          */
         "onB2b-sort-change"?: (event: B2bTableCustomEvent<ColumnSortChangeEventDetail>) => void;
         /**
-          * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns.
+          * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns. Colspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells to make them span more than one column.
          */
         "size"?: TableSizes;
     }
@@ -2477,19 +2889,23 @@ declare namespace LocalJSX {
          */
         "color"?: TableColourOptions;
         /**
-          * adds a border to the right of the cell. *
+          * How many columns the cell should span. Accepts numbers greater than one.
          */
-        "divider"?: boolean;
+        "colspan"?: number;
         /**
-          * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation.
+          * adds a border to the right of the cell. *
          */
-        "size"?: TableSizes;
+        "divider"?: boolean;
         /**
           * Whether text should wrap or truncate. It will only truncate when table size is equal *
          */
         "textWrap"?: boolean;
     }
     interface B2bTableHeader {
+        /**
+          * The width of the column. Increase it to change the size of the column relative to other columns.
+         */
+        "colspan"?: number;
         /**
           * Alignment of the content of the cell, by default is to the left. *
          */
@@ -2499,13 +2915,17 @@ declare namespace LocalJSX {
          */
         "divider"?: boolean;
         /**
-          * sets the header position to sticky. Use it when table is inside a scrollable container. *
+          * @deprecated Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. *
          */
         "fixed"?: boolean;
         /**
           * Emits whenever the sort direction changes.
          */
         "onB2b-change"?: (event: B2bTableHeaderCustomEvent<TableSortDirections>) => void;
+        /**
+          * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation.
+         */
+        "size"?: TableSizes;
         /**
           * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this.
          */
@@ -2550,6 +2970,10 @@ declare namespace LocalJSX {
           * Renders the rowgroup as an accordion. Both header and body must have accordion set to true. One table can contain multiple rowgroups of type body, each of which represents an accordion row with children.
          */
         "accordion"?: boolean;
+        /**
+          * Sets the header rowgroup position to sticky. Use this in a scrollable container.
+         */
+        "fixed"?: boolean;
         /**
           * Emits when the rowgroup as a whole is selected.
          */
@@ -2666,6 +3090,36 @@ declare namespace LocalJSX {
          */
         "value": string;
     }
+    interface B2bToggleChip {
+        /**
+          * Whether or not the chip is currently active. Per default, it is false.
+         */
+        "active"?: boolean;
+        /**
+          * Whether or not the chip is currently disabled. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The chip's label. This is required.
+         */
+        "label": string;
+        /**
+          * The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required.
+         */
+        "name": string;
+        /**
+          * Emits the value whenever the toggle chip is selected.
+         */
+        "onB2b-selected"?: (event: B2bToggleChipCustomEvent<ToggleChipEventDetail>) => void;
+        /**
+          * The value associated with the toggle chip. This is emitted when the chip is interacted with.
+         */
+        "value": any;
+        /**
+          * The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey
+         */
+        "variant"?: 'grey' | 'white';
+    }
     interface B2bToggleGroup {
         /**
           * Whether or not the toggle group is disabled as a whole. Per default it is false.
@@ -2680,6 +3134,32 @@ declare namespace LocalJSX {
          */
         "onB2b-group-change"?: (event: B2bToggleGroupCustomEvent<ToggleButtonEventDetail>) => void;
     }
+    interface B2bToggleSwitch {
+        /**
+          * Whether or not the toggle button is currently disabled. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * An optional label for the toggle switch.
+         */
+        "label"?: string;
+        /**
+          * The alignment of the toggle switch label.
+         */
+        "labelPosition"?: 'left' | 'right';
+        /**
+          * The toggle name. Use this if the toggle switch is used in a form group.
+         */
+        "name"?: string;
+        /**
+          * Emits the toggle switch value when it's state changes.
+         */
+        "onB2b-change"?: (event: B2bToggleSwitchCustomEvent<ToggleSwitchEventDetail>) => void;
+        /**
+          * Whether or not the toggle button is currently on or off. Per default it is off.
+         */
+        "state"?: boolean;
+    }
     /**
      * The tooltip can display additional information, and will be visible based on
      * a specific trigger.
@@ -2755,11 +3235,14 @@ declare namespace LocalJSX {
         "b2b-checkbox-group": B2bCheckboxGroup;
         "b2b-chip-component": B2bChipComponent;
         "b2b-dropdown": B2bDropdown;
+        "b2b-flyout-menu": B2bFlyoutMenu;
+        "b2b-flyout-menu-option": B2bFlyoutMenuOption;
         "b2b-grid": B2bGrid;
         "b2b-grid-col": B2bGridCol;
         "b2b-grid-row": B2bGridRow;
         "b2b-headline": B2bHeadline;
         "b2b-icon": B2bIcon;
+        "b2b-icon-100": B2bIcon100;
         "b2b-input": B2bInput;
         "b2b-input-group": B2bInputGroup;
         "b2b-input-label": B2bInputLabel;
@@ -2767,8 +3250,11 @@ declare namespace LocalJSX {
         "b2b-input-list-option": B2bInputListOption;
         "b2b-label": B2bLabel;
         "b2b-modal": B2bModal;
+        "b2b-multiselect-dropdown": B2bMultiselectDropdown;
+        "b2b-multiselect-option": B2bMultiselectOption;
         "b2b-pagination": B2bPagination;
         "b2b-paragraph": B2bParagraph;
+        "b2b-progress-bar": B2bProgressBar;
         "b2b-radio-button": B2bRadioButton;
         "b2b-radio-group": B2bRadioGroup;
         "b2b-required-separator": B2bRequiredSeparator;
@@ -2787,7 +3273,9 @@ declare namespace LocalJSX {
         "b2b-table-rowgroup": B2bTableRowgroup;
         "b2b-textarea": B2bTextarea;
         "b2b-toggle-button": B2bToggleButton;
+        "b2b-toggle-chip": B2bToggleChip;
         "b2b-toggle-group": B2bToggleGroup;
+        "b2b-toggle-switch": B2bToggleSwitch;
         "b2b-tooltip": B2bTooltip;
         "b2b-wizard": B2bWizard;
         "b2b-wizard-icon": B2bWizardIcon;
@@ -2808,6 +3296,8 @@ declare module "@stencil/core" {
             "b2b-checkbox-group": LocalJSX.B2bCheckboxGroup & JSXBase.HTMLAttributes<HTMLB2bCheckboxGroupElement>;
             "b2b-chip-component": LocalJSX.B2bChipComponent & JSXBase.HTMLAttributes<HTMLB2bChipComponentElement>;
             "b2b-dropdown": LocalJSX.B2bDropdown & JSXBase.HTMLAttributes<HTMLB2bDropdownElement>;
+            "b2b-flyout-menu": LocalJSX.B2bFlyoutMenu & JSXBase.HTMLAttributes<HTMLB2bFlyoutMenuElement>;
+            "b2b-flyout-menu-option": LocalJSX.B2bFlyoutMenuOption & JSXBase.HTMLAttributes<HTMLB2bFlyoutMenuOptionElement>;
             "b2b-grid": LocalJSX.B2bGrid & JSXBase.HTMLAttributes<HTMLB2bGridElement>;
             "b2b-grid-col": LocalJSX.B2bGridCol & JSXBase.HTMLAttributes<HTMLB2bGridColElement>;
             "b2b-grid-row": LocalJSX.B2bGridRow & JSXBase.HTMLAttributes<HTMLB2bGridRowElement>;
@@ -2817,6 +3307,7 @@ declare module "@stencil/core" {
              */
             "b2b-headline": LocalJSX.B2bHeadline & JSXBase.HTMLAttributes<HTMLB2bHeadlineElement>;
             "b2b-icon": LocalJSX.B2bIcon & JSXBase.HTMLAttributes<HTMLB2bIconElement>;
+            "b2b-icon-100": LocalJSX.B2bIcon100 & JSXBase.HTMLAttributes<HTMLB2bIcon100Element>;
             /**
              * Input component
              * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
@@ -2832,12 +3323,15 @@ declare module "@stencil/core" {
              * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
              */
             "b2b-modal": LocalJSX.B2bModal & JSXBase.HTMLAttributes<HTMLB2bModalElement>;
+            "b2b-multiselect-dropdown": LocalJSX.B2bMultiselectDropdown & JSXBase.HTMLAttributes<HTMLB2bMultiselectDropdownElement>;
+            "b2b-multiselect-option": LocalJSX.B2bMultiselectOption & JSXBase.HTMLAttributes<HTMLB2bMultiselectOptionElement>;
             "b2b-pagination": LocalJSX.B2bPagination & JSXBase.HTMLAttributes<HTMLB2bPaginationElement>;
             /**
              * Paragraph component to render text content.
              * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45
              */
             "b2b-paragraph": LocalJSX.B2bParagraph & JSXBase.HTMLAttributes<HTMLB2bParagraphElement>;
+            "b2b-progress-bar": LocalJSX.B2bProgressBar & JSXBase.HTMLAttributes<HTMLB2bProgressBarElement>;
             "b2b-radio-button": LocalJSX.B2bRadioButton & JSXBase.HTMLAttributes<HTMLB2bRadioButtonElement>;
             "b2b-radio-group": LocalJSX.B2bRadioGroup & JSXBase.HTMLAttributes<HTMLB2bRadioGroupElement>;
             "b2b-required-separator": LocalJSX.B2bRequiredSeparator & JSXBase.HTMLAttributes<HTMLB2bRequiredSeparatorElement>;
@@ -2864,7 +3358,9 @@ declare module "@stencil/core" {
              */
             "b2b-textarea": LocalJSX.B2bTextarea & JSXBase.HTMLAttributes<HTMLB2bTextareaElement>;
             "b2b-toggle-button": LocalJSX.B2bToggleButton & JSXBase.HTMLAttributes<HTMLB2bToggleButtonElement>;
+            "b2b-toggle-chip": LocalJSX.B2bToggleChip & JSXBase.HTMLAttributes<HTMLB2bToggleChipElement>;
             "b2b-toggle-group": LocalJSX.B2bToggleGroup & JSXBase.HTMLAttributes<HTMLB2bToggleGroupElement>;
+            "b2b-toggle-switch": LocalJSX.B2bToggleSwitch & JSXBase.HTMLAttributes<HTMLB2bToggleSwitchElement>;
             /**
              * The tooltip can display additional information, and will be visible based on
              * a specific trigger.