@scania/tegel 0.0.7 → 0.0.8

package/dist/types/components.d.ts

@@ -6,11 +6,13 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Placement } from "@popperjs/core";
-import { CollapsedEvent } from "./components/side-menu/webcomponent/side-menu";
+import { CollapseEvent, InternalSddsSideMenuPropChange } from "./components/side-menu/webcomponent/side-menu";
+import { CollapseEvent as CollapseEvent1 } from "./components/side-menu/webcomponent/side-menu";
 import { InternalSddsStepperPropChange } from "./components/stepper/sdds-stepper";
 import { InternalSddsTablePropChange } from "./components/data-table/table/table";
 export { Placement } from "@popperjs/core";
-export { CollapsedEvent } from "./components/side-menu/webcomponent/side-menu";
+export { CollapseEvent, InternalSddsSideMenuPropChange } from "./components/side-menu/webcomponent/side-menu";
+export { CollapseEvent as CollapseEvent1 } from "./components/side-menu/webcomponent/side-menu";
 export { InternalSddsStepperPropChange } from "./components/stepper/sdds-stepper";
 export { InternalSddsTablePropChange } from "./components/data-table/table/table";
 export namespace Components {
@@ -42,17 +44,17 @@ export namespace Components {
          */
         "paddingReset": boolean;
         /**
-          * Method for toggeling the expanded state of the accordion item.
+          * Method for toggeling the expanded state of the Accordion Item.
          */
         "toggleAccordionItem": () => Promise<void>;
     }
-    interface SddsBadges {
+    interface SddsBadge {
         /**
-          * Changes visibility of badge
+          * Changes visibility of Badge
          */
         "hidden": boolean;
         /**
-          * @deprecated Use size prop instead. Changes badge from large to small size
+          * @deprecated Use size prop instead. Changes Badge from large to small size
          */
         "isSmall": boolean;
         /**
@@ -60,13 +62,13 @@ export namespace Components {
          */
         "size": 'lg' | 'sm';
         /**
-          * Value shown in badge
+          * Value shown in Badge
          */
         "value": string;
     }
     interface SddsBanner {
         /**
-          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.
+          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for Banner close events you need to set this ID yourself to identify the Banner, as the default ID is random and will be different every time.
          */
         "bannerId": string;
         /**
@@ -74,11 +76,11 @@ export namespace Components {
          */
         "header": string;
         /**
-          * Hides the banner
+          * Hides the Banner
          */
         "hidden": boolean;
         /**
-          * Hides the banner.
+          * Hides the Banner.
          */
         "hideBanner": () => Promise<void>;
         /**
@@ -86,15 +88,15 @@ export namespace Components {
          */
         "icon": string;
         /**
-          * Removes the close button on the banner.
+          * Removes the close button on the Banner.
          */
         "persistent": boolean;
         /**
-          * Shows the banner
+          * Shows the Banner
          */
         "showBanner": () => Promise<void>;
         /**
-          * Type of banner
+          * Type of Banner
          */
         "type": 'error' | 'information' | 'none';
     }
@@ -132,24 +134,24 @@ export namespace Components {
     }
     interface SddsButton {
         /**
-          * Control for disabled state of component
+          * Control for disabled state of a component
          */
         "disabled": boolean;
         /**
-          * When enabled, makes button take 100% width
+          * When enabled, the Button takes 100% width
          */
         "fullbleed": boolean;
         /**
-          * Set the mode variant of the the button.
+          * Set the mode variant of the Button.
          */
         "modeVariant": 'primary' | 'secondary';
         "size": 'xs' | 'sm' | 'md' | 'lg';
         /**
-          * Text inside a button
+          * Text displayed inside the Button
          */
         "text": string;
         /**
-          * Type of button
+          * Type of Button
          */
         "type": 'primary' | 'secondary' | 'ghost' | 'danger';
     }
@@ -167,11 +169,11 @@ export namespace Components {
          */
         "bodyImgAlt": string;
         /**
-          * ID for the card, must be unique.  **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.
+          * ID for the Card, must be unique.  **NOTE**: If you're listening for Card events you need to set this ID yourself to identify the Card, as the default ID is random and will be different every time.
          */
         "cardId": string;
         /**
-          * Makes the card clickable.
+          * Makes the Card clickable.
          */
         "clickable": boolean;
         /**
@@ -191,7 +193,7 @@ export namespace Components {
          */
         "headerPlacement": 'above' | 'below';
         /**
-          * Variant of the card based on the theme used.
+          * Variant of the Card based on the theme used.
          */
         "modeVariant": 'primary' | 'secondary';
         /**
@@ -205,11 +207,11 @@ export namespace Components {
          */
         "checkboxId": string;
         /**
-          * Sets the checkbox as checked
+          * Sets the Checkbox as checked
          */
         "checked": boolean;
         /**
-          * Sets the checkbox in a disabled state
+          * Sets the Checkbox in a disabled state
          */
         "disabled": boolean;
         /**
@@ -217,7 +219,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Make the checkbox required
+          * Make the Checkbox required
          */
         "required": boolean;
         /**
@@ -225,7 +227,7 @@ export namespace Components {
          */
         "toggleCheckbox": () => Promise<{ checkboxId: string; checked: boolean; }>;
         /**
-          * Value for the checkbox
+          * Value for the Checkbox
          */
         "value": string;
     }
@@ -440,6 +442,98 @@ export namespace Components {
          */
         "value": string;
     }
+    interface SddsDropdownOptionV2 {
+        /**
+          * Sets the option as disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Method to select/deselect an option if the option is not disabled.
+         */
+        "setSelected": (selected: boolean) => Promise<void>;
+        /**
+          * Value for the dropdown option.
+         */
+        "value": string;
+    }
+    interface SddsDropdownV2 {
+        /**
+          * Method for closing the dropdown.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Default value selected in the dropdown.
+         */
+        "defaultValue": string;
+        /**
+          * Sets the dropdown in a disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Sets the dropdown in an error state
+         */
+        "error": boolean;
+        /**
+          * Enables filtration in the dropdown.
+         */
+        "filter": boolean;
+        /**
+          * Helper text for the dropdown.
+         */
+        "helper": string;
+        /**
+          * Label text for the dropdown.
+         */
+        "label": string;
+        /**
+          * Label text position
+         */
+        "labelPosition": 'inside' | 'outside';
+        /**
+          * Mode variant of the component, based on current mode.
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Enables multiselect in the dropdown.
+         */
+        "multiselect": boolean;
+        /**
+          * Name for the dropdowns input element.
+         */
+        "name": string;
+        /**
+          * Text that is displayed if filter is used and there are no options that matches the search.
+         */
+        "noResultText": string;
+        /**
+          * The direction the dropdown should open, auto if not specified.
+         */
+        "openDirection": 'up' | 'down' | 'auto';
+        /**
+          * Populate the dropdown via a JSON array
+         */
+        "options": Array<{ value: string; label: string; disabled: boolean }>;
+        /**
+          * Placeholder text for the dropdown.
+         */
+        "placeholder": string;
+        /**
+          * Method for removing a selected value in the dropdown.
+         */
+        "removeValue": (oldValue: string) => Promise<{ value: string; label: string; }[]>;
+        /**
+          * Method that resets the dropdown.
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Method for setting the value of the dropdown.
+         */
+        "setValue": (newValue: string, newValueLabel: string) => Promise<{ value: string; label: string; }[]>;
+        /**
+          * The size of the dropdown.
+         */
+        "size": 'sm' | 'md' | 'lg';
+    }
     interface SddsFolderTab {
         /**
           * Disables the tab.
@@ -733,15 +827,15 @@ export namespace Components {
          */
         "placement": Placement;
         /**
-          * Element that will trigger the popover (takes priority over selector)
+          * Element that will trigger the Popover (takes priority over selector)
          */
         "referenceEl": HTMLElement;
         /**
-          * The CSS-selector for an element that will trigger the popover
+          * The CSS-selector for an element that will trigger the Popover
          */
         "selector": string;
         /**
-          * Controls wether the popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside.
+          * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside.
          */
         "show": boolean;
     }
@@ -759,11 +853,11 @@ export namespace Components {
          */
         "placement": Placement;
         /**
-          * Element that will trigger the popover (takes priority over selector)
+          * Element that will trigger the pop-over (takes priority over selector)
          */
         "referenceEl": HTMLElement;
         /**
-          * The CSS-selector for an element that will trigger the popover
+          * The CSS-selector for an element that will trigger the pop-over
          */
         "selector": string;
         /**
@@ -773,23 +867,23 @@ export namespace Components {
     }
     interface SddsRadioButton {
         /**
-          * Decides if the radio button is checked or not.
+          * Decides if the Radio Button is checked or not.
          */
         "checked": boolean;
         /**
-          * Decides if the radio button is disabled or not.
+          * Decides if the Radio Button is disabled or not.
          */
         "disabled": boolean;
         /**
-          * Name of radio button, used for reference.
+          * Name of Radio Button, used for reference.
          */
         "name": string;
         /**
-          * Unique radio button identifier.
+          * Unique Radio Button identifier.
          */
         "radioId": string;
         /**
-          * Decides if the radio button is required or not.
+          * Decides if the Radio Button is required or not.
          */
         "required": boolean;
         /**
@@ -799,15 +893,15 @@ export namespace Components {
     }
     interface SddsSideMenu {
         /**
-          * If the side menu is collapsed. Only a persistent desktop menu can be collapsed.
+          * If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed. NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the sddsCollapse event.
          */
         "collapsed": boolean;
         /**
-          * If the side menu is open or not.
+          * Applicable only for mobile. If the Side Menu is open or not.
          */
         "open": boolean;
         /**
-          * If the side menu should always be shown on desktop screens to the side.
+          * Applicable only for desktop. If the Side Menu should always be shown.
          */
         "persistent": boolean;
     }
@@ -959,11 +1053,11 @@ export namespace Components {
     }
     interface SddsSpinner {
         /**
-          * Size of spinner
+          * Size of the Spinner
          */
         "size": 'xs' | 'sm' | 'md' | 'lg';
         /**
-          * Variant of spinner
+          * Variant of the Spinner
          */
         "variant": 'standard' | 'inverted';
     }
@@ -1038,14 +1132,6 @@ export namespace Components {
           * Prop to pass JSON string which enables automatic rendering of table rows and cells
          */
         "bodyData": any;
-        /**
-          * Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term
-         */
-        "disableFilteringFunction": boolean;
-        /**
-          * Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting
-         */
-        "disableSortingFunction": boolean;
         /**
           * Prop for showcase of rendering JSON in body-data, just for presentation purposes
          */
@@ -1060,32 +1146,24 @@ export namespace Components {
         "colSpan": number;
     }
     interface SddsTableFooter {
-        /**
-          * Prop for client to set max number of pages
-         */
-        "clientMaxPages": number;
-        /**
-          * Prop for client to set current page number
-         */
-        "clientPaginationValue": number;
         /**
           * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too
          */
         "clientSetColumnsNumber": number;
         /**
-          * Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component
+          * Prop for client to set max number of pages.
          */
-        "disablePaginationFunction": boolean;
+        "maxPages": number;
         /**
-          * Prop to enable client controlled pagination
+          * Enable pagination and show pagination controls
          */
-        "enableClientPagination": boolean;
+        "pagination": boolean;
         /**
-          * Enable pagination and show pagination controls
+          * Sets the pagination number.
          */
-        "enablePagination": boolean;
+        "paginationValue": number;
         /**
-          * Sets how many rows to display when pagination is enabled
+          * Sets how many rows to display when pagination is enabled.
          */
         "rowsPerPage": number;
     }
@@ -1231,15 +1309,15 @@ export namespace Components {
          */
         "header": string;
         /**
-          * Hides the toast.
+          * Hides the Toast.
          */
         "hidden": boolean;
         /**
-          * Hides the toast.
+          * Hides the Toast.
          */
         "hideToast": () => Promise<void>;
         /**
-          * Shows the toast.
+          * Shows the Toast.
          */
         "showToast": () => Promise<void>;
         /**
@@ -1247,29 +1325,29 @@ export namespace Components {
          */
         "subheader": string;
         /**
-          * ID for the toast. Randomly generated if not specified.
+          * ID for the Toast. Randomly generated if not specified.
          */
         "toastId": string;
         /**
-          * ARIA role for the toast.
+          * ARIA role for the Toast.
          */
         "toastRole": 'alert' | 'log' | 'status';
         /**
-          * Type of toast.
+          * Type of Toast.
          */
         "type": 'information' | 'error' | 'warning' | 'success';
     }
     interface SddsToggle {
         /**
-          * Sets the toggle as checked
+          * Sets the Toggle as checked
          */
         "checked": boolean;
         /**
-          * Sets the toggle in a disabled state
+          * Sets the Toggle in a disabled state
          */
         "disabled": boolean;
         /**
-          * Headline for the toggle
+          * Headline for the Toggle
          */
         "headline": string;
         /**
@@ -1277,37 +1355,37 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Make the toggle required
+          * Make the Toggle required
          */
         "required": boolean;
         /**
-          * Size of the toggle
+          * Size of the Toggle
          */
         "size": 'sm' | 'lg';
         /**
-          * Toggles the toggle.
+          * Toggles the Toggle.
          */
         "toggle": () => Promise<{ toggleId: string; checked: boolean; }>;
         /**
-          * ID of the toggles input element, if not specifed it's randomly generated
+          * ID of the Toggle's input element, if not specified it's randomly generated
          */
         "toggleId": string;
     }
     interface SddsTooltip {
         /**
-          * Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button.
+          * Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button.
          */
         "mouseOverTooltip": boolean;
         /**
-          * Placement of tooltip.
+          * Placement of Tooltip.
          */
         "placement": Placement;
         /**
-          * Element that will trigger the tooltip (takes priority over selector)
+          * Element that will trigger the Tooltip (takes priority over selector)
          */
         "referenceEl": HTMLElement;
         /**
-          * The CSS-selector for an element that will trigger the tooltip
+          * The CSS-selector for an element that will trigger the Tooltip
          */
         "selector": string;
         /**
@@ -1315,7 +1393,7 @@ export namespace Components {
          */
         "show": boolean;
         /**
-          * In case tooltip contains only text, no HTML, text can be passed by this prop
+          * In case Tooltip contains only text, no HTML, text can be passed by this prop
          */
         "text": string;
     }
@@ -1352,6 +1430,14 @@ export interface SddsDropdownOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSddsDropdownOptionElement;
 }
+export interface SddsDropdownOptionV2CustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsDropdownOptionV2Element;
+}
+export interface SddsDropdownV2CustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsDropdownV2Element;
+}
 export interface SddsFolderTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSddsFolderTabsElement;
@@ -1380,6 +1466,10 @@ export interface SddsSideMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSddsSideMenuElement;
 }
+export interface SddsSideMenuCollapseButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsSideMenuCollapseButtonElement;
+}
 export interface SddsSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSddsSliderElement;
@@ -1445,11 +1535,11 @@ declare global {
         prototype: HTMLSddsAccordionItemElement;
         new (): HTMLSddsAccordionItemElement;
     };
-    interface HTMLSddsBadgesElement extends Components.SddsBadges, HTMLStencilElement {
+    interface HTMLSddsBadgeElement extends Components.SddsBadge, HTMLStencilElement {
     }
-    var HTMLSddsBadgesElement: {
-        prototype: HTMLSddsBadgesElement;
-        new (): HTMLSddsBadgesElement;
+    var HTMLSddsBadgeElement: {
+        prototype: HTMLSddsBadgeElement;
+        new (): HTMLSddsBadgeElement;
     };
     interface HTMLSddsBannerElement extends Components.SddsBanner, HTMLStencilElement {
     }
@@ -1541,6 +1631,18 @@ declare global {
         prototype: HTMLSddsDropdownOptionElement;
         new (): HTMLSddsDropdownOptionElement;
     };
+    interface HTMLSddsDropdownOptionV2Element extends Components.SddsDropdownOptionV2, HTMLStencilElement {
+    }
+    var HTMLSddsDropdownOptionV2Element: {
+        prototype: HTMLSddsDropdownOptionV2Element;
+        new (): HTMLSddsDropdownOptionV2Element;
+    };
+    interface HTMLSddsDropdownV2Element extends Components.SddsDropdownV2, HTMLStencilElement {
+    }
+    var HTMLSddsDropdownV2Element: {
+        prototype: HTMLSddsDropdownV2Element;
+        new (): HTMLSddsDropdownV2Element;
+    };
     interface HTMLSddsFolderTabElement extends Components.SddsFolderTab, HTMLStencilElement {
     }
     var HTMLSddsFolderTabElement: {
@@ -1910,7 +2012,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "sdds-accordion": HTMLSddsAccordionElement;
         "sdds-accordion-item": HTMLSddsAccordionItemElement;
-        "sdds-badges": HTMLSddsBadgesElement;
+        "sdds-badge": HTMLSddsBadgeElement;
         "sdds-banner": HTMLSddsBannerElement;
         "sdds-block": HTMLSddsBlockElement;
         "sdds-body-cell": HTMLSddsBodyCellElement;
@@ -1926,6 +2028,8 @@ declare global {
         "sdds-dropdown": HTMLSddsDropdownElement;
         "sdds-dropdown-filter": HTMLSddsDropdownFilterElement;
         "sdds-dropdown-option": HTMLSddsDropdownOptionElement;
+        "sdds-dropdown-option-v2": HTMLSddsDropdownOptionV2Element;
+        "sdds-dropdown-v2": HTMLSddsDropdownV2Element;
         "sdds-folder-tab": HTMLSddsFolderTabElement;
         "sdds-folder-tabs": HTMLSddsFolderTabsElement;
         "sdds-footer": HTMLSddsFooterElement;
@@ -2014,7 +2118,7 @@ declare namespace LocalJSX {
          */
         "header"?: string;
         /**
-          * Fires when the accordion item is clicked but before the it is closed or opened.
+          * Fires when the Accordion Item is clicked but before the it is closed or opened.
          */
         "onSddsToggle"?: (event: SddsAccordionItemCustomEvent<{
     expanded: boolean;
@@ -2024,13 +2128,13 @@ declare namespace LocalJSX {
          */
         "paddingReset"?: boolean;
     }
-    interface SddsBadges {
+    interface SddsBadge {
         /**
-          * Changes visibility of badge
+          * Changes visibility of Badge
          */
         "hidden"?: boolean;
         /**
-          * @deprecated Use size prop instead. Changes badge from large to small size
+          * @deprecated Use size prop instead. Changes Badge from large to small size
          */
         "isSmall"?: boolean;
         /**
@@ -2038,13 +2142,13 @@ declare namespace LocalJSX {
          */
         "size"?: 'lg' | 'sm';
         /**
-          * Value shown in badge
+          * Value shown in Badge
          */
         "value"?: string;
     }
     interface SddsBanner {
         /**
-          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.
+          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for Banner close events you need to set this ID yourself to identify the Banner, as the default ID is random and will be different every time.
          */
         "bannerId"?: string;
         /**
@@ -2052,7 +2156,7 @@ declare namespace LocalJSX {
          */
         "header"?: string;
         /**
-          * Hides the banner
+          * Hides the Banner
          */
         "hidden"?: boolean;
         /**
@@ -2060,23 +2164,23 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
         /**
-          * Sends unique banner identifier when the close button is pressed.
+          * Sends a unique Banner identifier when the close button is pressed.
          */
         "onSddsClose"?: (event: SddsBannerCustomEvent<{
     bannerId: string;
   }>) => void;
         /**
-          * Sends unique banner identifier when the close button is pressed.
+          * Sends the unique Banner identifier when the close button is pressed.
          */
         "onSddsShow"?: (event: SddsBannerCustomEvent<{
     bannerId: string;
   }>) => void;
         /**
-          * Removes the close button on the banner.
+          * Removes the close button on the Banner.
          */
         "persistent"?: boolean;
         /**
-          * Type of banner
+          * Type of Banner
          */
         "type"?: 'error' | 'information' | 'none';
     }
@@ -2114,24 +2218,24 @@ declare namespace LocalJSX {
     }
     interface SddsButton {
         /**
-          * Control for disabled state of component
+          * Control for disabled state of a component
          */
         "disabled"?: boolean;
         /**
-          * When enabled, makes button take 100% width
+          * When enabled, the Button takes 100% width
          */
         "fullbleed"?: boolean;
         /**
-          * Set the mode variant of the the button.
+          * Set the mode variant of the Button.
          */
         "modeVariant"?: 'primary' | 'secondary';
         "size"?: 'xs' | 'sm' | 'md' | 'lg';
         /**
-          * Text inside a button
+          * Text displayed inside the Button
          */
         "text"?: string;
         /**
-          * Type of button
+          * Type of Button
          */
         "type"?: 'primary' | 'secondary' | 'ghost' | 'danger';
     }
@@ -2149,11 +2253,11 @@ declare namespace LocalJSX {
          */
         "bodyImgAlt"?: string;
         /**
-          * ID for the card, must be unique.  **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.
+          * ID for the Card, must be unique.  **NOTE**: If you're listening for Card events you need to set this ID yourself to identify the Card, as the default ID is random and will be different every time.
          */
         "cardId"?: string;
         /**
-          * Makes the card clickable.
+          * Makes the Card clickable.
          */
         "clickable"?: boolean;
         /**
@@ -2173,11 +2277,11 @@ declare namespace LocalJSX {
          */
         "headerPlacement"?: 'above' | 'below';
         /**
-          * Variant of the card based on the theme used.
+          * Variant of the Card based on the theme used.
          */
         "modeVariant"?: 'primary' | 'secondary';
         /**
-          * Sends unique card identifier when the card is clicked, if clickable=true
+          * Sends unique Card identifier when the Card is clicked, if clickable=true
          */
         "onSddsClick"?: (event: SddsCardCustomEvent<{
     cardId: string;
@@ -2193,11 +2297,11 @@ declare namespace LocalJSX {
          */
         "checkboxId"?: string;
         /**
-          * Sets the checkbox as checked
+          * Sets the Checkbox as checked
          */
         "checked"?: boolean;
         /**
-          * Sets the checkbox in a disabled state
+          * Sets the Checkbox in a disabled state
          */
         "disabled"?: boolean;
         /**
@@ -2205,11 +2309,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Blur event for the checkbox
+          * Blur event for the Checkbox
          */
         "onSddsBlur"?: (event: SddsCheckboxCustomEvent<FocusEvent>) => void;
         /**
-          * Sends unique checkbox identifier and checked status when it is checked/unchecked.
+          * Sends unique Checkbox identifier and checked status when it is checked/unchecked.
          */
         "onSddsChange"?: (event: SddsCheckboxCustomEvent<{
     checkboxId: string;
@@ -2217,15 +2321,15 @@ declare namespace LocalJSX {
     value?: string;
   }>) => void;
         /**
-          * Focus event for the checkbox
+          * Focus event for the Checkbox
          */
         "onSddsFocus"?: (event: SddsCheckboxCustomEvent<FocusEvent>) => void;
         /**
-          * Make the checkbox required
+          * Make the Checkbox required
          */
         "required"?: boolean;
         /**
-          * Value for the checkbox
+          * Value for the Checkbox
          */
         "value"?: string;
     }
@@ -2460,6 +2564,112 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface SddsDropdownOptionV2 {
+        /**
+          * Sets the option as disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Blur event for the dropdown option.
+         */
+        "onSddsBlur"?: (event: SddsDropdownOptionV2CustomEvent<FocusEvent>) => void;
+        /**
+          * Focus event for the dropdown option.
+         */
+        "onSddsFocus"?: (event: SddsDropdownOptionV2CustomEvent<FocusEvent>) => void;
+        /**
+          * Click event for the dropdown option.
+         */
+        "onSddsSelect"?: (event: SddsDropdownOptionV2CustomEvent<{
+    selected: boolean;
+    value: string;
+  }>) => void;
+        /**
+          * Value for the dropdown option.
+         */
+        "value"?: string;
+    }
+    interface SddsDropdownV2 {
+        /**
+          * Default value selected in the dropdown.
+         */
+        "defaultValue"?: string;
+        /**
+          * Sets the dropdown in a disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Sets the dropdown in an error state
+         */
+        "error"?: boolean;
+        /**
+          * Enables filtration in the dropdown.
+         */
+        "filter"?: boolean;
+        /**
+          * Helper text for the dropdown.
+         */
+        "helper"?: string;
+        /**
+          * Label text for the dropdown.
+         */
+        "label"?: string;
+        /**
+          * Label text position
+         */
+        "labelPosition"?: 'inside' | 'outside';
+        /**
+          * Mode variant of the component, based on current mode.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        /**
+          * Enables multiselect in the dropdown.
+         */
+        "multiselect"?: boolean;
+        /**
+          * Name for the dropdowns input element.
+         */
+        "name"?: string;
+        /**
+          * Text that is displayed if filter is used and there are no options that matches the search.
+         */
+        "noResultText"?: string;
+        /**
+          * Blur event for the dropdown.
+         */
+        "onSddsBlur"?: (event: SddsDropdownV2CustomEvent<FocusEvent>) => void;
+        /**
+          * Change event for the dropdown.
+         */
+        "onSddsChange"?: (event: SddsDropdownV2CustomEvent<{
+    name: string;
+    value: string;
+  }>) => void;
+        /**
+          * Focus event for the dropdown.
+         */
+        "onSddsFocus"?: (event: SddsDropdownV2CustomEvent<FocusEvent>) => void;
+        /**
+          * Input event for the dropdown.
+         */
+        "onSddsInput"?: (event: SddsDropdownV2CustomEvent<InputEvent>) => void;
+        /**
+          * The direction the dropdown should open, auto if not specified.
+         */
+        "openDirection"?: 'up' | 'down' | 'auto';
+        /**
+          * Populate the dropdown via a JSON array
+         */
+        "options"?: Array<{ value: string; label: string; disabled: boolean }>;
+        /**
+          * Placeholder text for the dropdown.
+         */
+        "placeholder"?: string;
+        /**
+          * The size of the dropdown.
+         */
+        "size"?: 'sm' | 'md' | 'lg';
+    }
     interface SddsFolderTab {
         /**
           * Disables the tab.
@@ -2524,7 +2734,11 @@ declare namespace LocalJSX {
         /**
           * Sends unique table identifier,column key and sorting direction to the sdds-table-body component, can also be listened to in order to implement custom sorting logic.
          */
-        "onSddsSortChange"?: (event: SddsHeaderCellCustomEvent<any>) => void;
+        "onSddsSortChange"?: (event: SddsHeaderCellCustomEvent<{
+    tableId: string;
+    columnKey: string;
+    sortingDirection: 'asc' | 'desc';
+  }>) => void;
         /**
           * If passed as prop, enables sorting on that column
          */
@@ -2752,15 +2966,15 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
         /**
-          * Element that will trigger the popover (takes priority over selector)
+          * Element that will trigger the Popover (takes priority over selector)
          */
         "referenceEl"?: HTMLElement;
         /**
-          * The CSS-selector for an element that will trigger the popover
+          * The CSS-selector for an element that will trigger the Popover
          */
         "selector"?: string;
         /**
-          * Controls wether the popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside.
+          * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside.
          */
         "show"?: boolean;
     }
@@ -2778,11 +2992,11 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
         /**
-          * Element that will trigger the popover (takes priority over selector)
+          * Element that will trigger the pop-over (takes priority over selector)
          */
         "referenceEl"?: HTMLElement;
         /**
-          * The CSS-selector for an element that will trigger the popover
+          * The CSS-selector for an element that will trigger the pop-over
          */
         "selector"?: string;
         /**
@@ -2792,30 +3006,30 @@ declare namespace LocalJSX {
     }
     interface SddsRadioButton {
         /**
-          * Decides if the radio button is checked or not.
+          * Decides if the Radio Button is checked or not.
          */
         "checked"?: boolean;
         /**
-          * Decides if the radio button is disabled or not.
+          * Decides if the Radio Button is disabled or not.
          */
         "disabled"?: boolean;
         /**
-          * Name of radio button, used for reference.
+          * Name of Radio Button, used for reference.
          */
         "name"?: string;
         /**
-          * Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing.
+          * Sends unique Radio Button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing.
          */
         "onSddsChange"?: (event: SddsRadioButtonCustomEvent<{
     radioId: string;
     value: string;
   }>) => void;
         /**
-          * Unique radio button identifier.
+          * Unique Radio Button identifier.
          */
         "radioId"?: string;
         /**
-          * Decides if the radio button is required or not.
+          * Decides if the Radio Button is required or not.
          */
         "required"?: boolean;
         /**
@@ -2825,25 +3039,29 @@ declare namespace LocalJSX {
     }
     interface SddsSideMenu {
         /**
-          * If the side menu is collapsed. Only a persistent desktop menu can be collapsed.
+          * If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed. NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the sddsCollapse event.
          */
         "collapsed"?: boolean;
         /**
-          * Broadcasts collapsed state to child components.
+          * Event that is emitted when the Side Menu is collapsed.
          */
-        "onSddsSideMenuCollapsed"?: (event: SddsSideMenuCustomEvent<CollapsedEvent>) => void;
+        "onSddsCollapse"?: (event: SddsSideMenuCustomEvent<CollapseEvent>) => void;
         /**
-          * If the side menu is open or not.
+          * Applicable only for mobile. If the Side Menu is open or not.
          */
         "open"?: boolean;
         /**
-          * If the side menu should always be shown on desktop screens to the side.
+          * Applicable only for desktop. If the Side Menu should always be shown.
          */
         "persistent"?: boolean;
     }
     interface SddsSideMenuCloseButton {
     }
     interface SddsSideMenuCollapseButton {
+        /**
+          * Event that is broadcasted when the collapse button is clicked. Prevent it to disable automatic collapsing, and set the collapsed prop on the Side Menu yourself.
+         */
+        "onSddsCollapse"?: (event: SddsSideMenuCollapseButtonCustomEvent<CollapseEvent1>) => void;
     }
     interface SddsSideMenuDropdown {
         /**
@@ -2991,11 +3209,11 @@ declare namespace LocalJSX {
     }
     interface SddsSpinner {
         /**
-          * Size of spinner
+          * Size of the Spinner
          */
         "size"?: 'xs' | 'sm' | 'md' | 'lg';
         /**
-          * Variant of spinner
+          * Variant of the Spinner
          */
         "variant"?: 'standard' | 'inverted';
     }
@@ -3071,14 +3289,6 @@ declare namespace LocalJSX {
           * Prop to pass JSON string which enables automatic rendering of table rows and cells
          */
         "bodyData"?: any;
-        /**
-          * Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term
-         */
-        "disableFilteringFunction"?: boolean;
-        /**
-          * Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting
-         */
-        "disableSortingFunction"?: boolean;
         /**
           * Prop for showcase of rendering JSON in body-data, just for presentation purposes
          */
@@ -3093,36 +3303,31 @@ declare namespace LocalJSX {
         "colSpan"?: number;
     }
     interface SddsTableFooter {
-        /**
-          * Prop for client to set max number of pages
-         */
-        "clientMaxPages"?: number;
-        /**
-          * Prop for client to set current page number
-         */
-        "clientPaginationValue"?: number;
         /**
           * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too
          */
         "clientSetColumnsNumber"?: number;
         /**
-          * Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component
+          * Prop for client to set max number of pages.
          */
-        "disablePaginationFunction"?: boolean;
+        "maxPages"?: number;
         /**
-          * Prop to enable client controlled pagination
+          * Event to send current page value to sdds-table-body component, can also be listened to in order to implement custom pagination logic.
          */
-        "enableClientPagination"?: boolean;
+        "onSddsPageChange"?: (event: SddsTableFooterCustomEvent<{
+    tableId: string;
+    paginationValue: number;
+  }>) => void;
         /**
           * Enable pagination and show pagination controls
          */
-        "enablePagination"?: boolean;
+        "pagination"?: boolean;
         /**
-          * Event to send current page value back to sdds-table-body component, can also be listened to in order to implement custom pagination logic.
+          * Sets the pagination number.
          */
-        "onSddsPageChange"?: (event: SddsTableFooterCustomEvent<any>) => void;
+        "paginationValue"?: number;
         /**
-          * Sets how many rows to display when pagination is enabled
+          * Sets how many rows to display when pagination is enabled.
          */
         "rowsPerPage"?: number;
     }
@@ -3136,7 +3341,10 @@ declare namespace LocalJSX {
         /**
           * Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic.
          */
-        "onSddsFilter"?: (event: SddsTableToolbarCustomEvent<any>) => void;
+        "onSddsFilterChange"?: (event: SddsTableToolbarCustomEvent<{
+    tableId: string;
+    query: string;
+  }>) => void;
         /**
           * Adds title to the data-table
          */
@@ -3304,11 +3512,11 @@ declare namespace LocalJSX {
          */
         "header"?: string;
         /**
-          * Hides the toast.
+          * Hides the Toast.
          */
         "hidden"?: boolean;
         /**
-          * Sends unique toast identifier component is closed.
+          * Sends unique Toast identifier when component is closed.
          */
         "onSddsClose"?: (event: SddsToastCustomEvent<{
     toastId: string;
@@ -3318,29 +3526,29 @@ declare namespace LocalJSX {
          */
         "subheader"?: string;
         /**
-          * ID for the toast. Randomly generated if not specified.
+          * ID for the Toast. Randomly generated if not specified.
          */
         "toastId"?: string;
         /**
-          * ARIA role for the toast.
+          * ARIA role for the Toast.
          */
         "toastRole"?: 'alert' | 'log' | 'status';
         /**
-          * Type of toast.
+          * Type of Toast.
          */
         "type"?: 'information' | 'error' | 'warning' | 'success';
     }
     interface SddsToggle {
         /**
-          * Sets the toggle as checked
+          * Sets the Toggle as checked
          */
         "checked"?: boolean;
         /**
-          * Sets the toggle in a disabled state
+          * Sets the Toggle in a disabled state
          */
         "disabled"?: boolean;
         /**
-          * Headline for the toggle
+          * Headline for the Toggle
          */
         "headline"?: string;
         /**
@@ -3348,40 +3556,40 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Sends unique toggle identifier and status when it is toggled.
+          * Sends unique Toggle identifier and status when it is toggled.
          */
         "onSddsToggle"?: (event: SddsToggleCustomEvent<{
     toggleId: string;
     checked: boolean;
   }>) => void;
         /**
-          * Make the toggle required
+          * Make the Toggle required
          */
         "required"?: boolean;
         /**
-          * Size of the toggle
+          * Size of the Toggle
          */
         "size"?: 'sm' | 'lg';
         /**
-          * ID of the toggles input element, if not specifed it's randomly generated
+          * ID of the Toggle's input element, if not specified it's randomly generated
          */
         "toggleId"?: string;
     }
     interface SddsTooltip {
         /**
-          * Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button.
+          * Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button.
          */
         "mouseOverTooltip"?: boolean;
         /**
-          * Placement of tooltip.
+          * Placement of Tooltip.
          */
         "placement"?: Placement;
         /**
-          * Element that will trigger the tooltip (takes priority over selector)
+          * Element that will trigger the Tooltip (takes priority over selector)
          */
         "referenceEl"?: HTMLElement;
         /**
-          * The CSS-selector for an element that will trigger the tooltip
+          * The CSS-selector for an element that will trigger the Tooltip
          */
         "selector"?: string;
         /**
@@ -3389,14 +3597,14 @@ declare namespace LocalJSX {
          */
         "show"?: boolean;
         /**
-          * In case tooltip contains only text, no HTML, text can be passed by this prop
+          * In case Tooltip contains only text, no HTML, text can be passed by this prop
          */
         "text"?: string;
     }
     interface IntrinsicElements {
         "sdds-accordion": SddsAccordion;
         "sdds-accordion-item": SddsAccordionItem;
-        "sdds-badges": SddsBadges;
+        "sdds-badge": SddsBadge;
         "sdds-banner": SddsBanner;
         "sdds-block": SddsBlock;
         "sdds-body-cell": SddsBodyCell;
@@ -3412,6 +3620,8 @@ declare namespace LocalJSX {
         "sdds-dropdown": SddsDropdown;
         "sdds-dropdown-filter": SddsDropdownFilter;
         "sdds-dropdown-option": SddsDropdownOption;
+        "sdds-dropdown-option-v2": SddsDropdownOptionV2;
+        "sdds-dropdown-v2": SddsDropdownV2;
         "sdds-folder-tab": SddsFolderTab;
         "sdds-folder-tabs": SddsFolderTabs;
         "sdds-footer": SddsFooter;
@@ -3481,7 +3691,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "sdds-accordion": LocalJSX.SddsAccordion & JSXBase.HTMLAttributes<HTMLSddsAccordionElement>;
             "sdds-accordion-item": LocalJSX.SddsAccordionItem & JSXBase.HTMLAttributes<HTMLSddsAccordionItemElement>;
-            "sdds-badges": LocalJSX.SddsBadges & JSXBase.HTMLAttributes<HTMLSddsBadgesElement>;
+            "sdds-badge": LocalJSX.SddsBadge & JSXBase.HTMLAttributes<HTMLSddsBadgeElement>;
             "sdds-banner": LocalJSX.SddsBanner & JSXBase.HTMLAttributes<HTMLSddsBannerElement>;
             "sdds-block": LocalJSX.SddsBlock & JSXBase.HTMLAttributes<HTMLSddsBlockElement>;
             "sdds-body-cell": LocalJSX.SddsBodyCell & JSXBase.HTMLAttributes<HTMLSddsBodyCellElement>;
@@ -3497,6 +3707,8 @@ declare module "@stencil/core" {
             "sdds-dropdown": LocalJSX.SddsDropdown & JSXBase.HTMLAttributes<HTMLSddsDropdownElement>;
             "sdds-dropdown-filter": LocalJSX.SddsDropdownFilter & JSXBase.HTMLAttributes<HTMLSddsDropdownFilterElement>;
             "sdds-dropdown-option": LocalJSX.SddsDropdownOption & JSXBase.HTMLAttributes<HTMLSddsDropdownOptionElement>;
+            "sdds-dropdown-option-v2": LocalJSX.SddsDropdownOptionV2 & JSXBase.HTMLAttributes<HTMLSddsDropdownOptionV2Element>;
+            "sdds-dropdown-v2": LocalJSX.SddsDropdownV2 & JSXBase.HTMLAttributes<HTMLSddsDropdownV2Element>;
             "sdds-folder-tab": LocalJSX.SddsFolderTab & JSXBase.HTMLAttributes<HTMLSddsFolderTabElement>;
             "sdds-folder-tabs": LocalJSX.SddsFolderTabs & JSXBase.HTMLAttributes<HTMLSddsFolderTabsElement>;
             "sdds-footer": LocalJSX.SddsFooter & JSXBase.HTMLAttributes<HTMLSddsFooterElement>;