@duetds/components 4.35.4 → 5.0.0

package/lib/types/components.d.ts

@@ -6,9 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel } from "./common-types";
+import { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 import { DuetLangObject } from "./utils/language-utils";
 import { DuetAlertEvent } from "./components/duet-alert/duet-alert";
-import { DuetButtonIconSize, DuetButtonSize, DuetButtonVariation, DuetButtonWrapping } from "./components/duet-button/duet-button";
+import { DuetButtonIconSize, DuetButtonSize, DuetButtonTextCentering, DuetButtonVariation, DuetButtonWrapping } from "./components/duet-button/duet-button";
 import { DuetCaptionSize } from "./components/duet-caption/duet-caption";
 import { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card";
 import { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox";
@@ -17,10 +18,8 @@ import { DuetCollapsibleHeadingFontSize, DuetCollapsibleToggleEvent, DuetCollaps
 import { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-cookie-consent";
 import { DuetDatePickerChangeEvent, DuetDatePickerDirection, DuetDatePickerFocusEvent } from "./components/duet-date-picker/duet-date-picker";
 import { DuetDividerMargin } from "./components/duet-divider/duet-divider";
-import { DuetEditableTableGroupNames, DuetEditableTableItems } from "./components/duet-editable-table/duet-editable-table";
-import { DuetEditableTableActions } from "./components/duet-editable-table/duet-editable-table-item";
-import { DuetEditableTableActionButtonItems, DuetEditableTableItemEvent } from "./components/duet-editable-table/duet-editable-table-button";
-import { DuetEditableTableActions as DuetEditableTableActions1, DuetEditableTableItemData, DuetEditableTableItemEvent as DuetEditableTableItemEvent1 } from "./components/duet-editable-table/duet-editable-table-item";
+import { DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant } from "./components/duet-table/duet-table";
+import { DuetEditableTableActions, DuetEditableTableColumns, DuetEditableTableRows, DuetTableMenuEvent, DuetTableToggleEvent } from "./components/duet-editable-table/duet-editable-table";
 import { DuetEmptyStateSize } from "./components/duet-empty-state/duet-empty-state";
 import { DuetFooterAnalyticsEvent, DuetFooterChangeEvent, DuetFooterVariation } from "./components/duet-footer/duet-footer";
 import { DuetGridAlignment, DuetGridDistribution, DuetGridMobileAlignment } from "./components/duet-grid/duet-grid";
@@ -36,24 +35,88 @@ import { DuetLogoSize } from "./components/duet-logo/duet-logo";
 import { DuetModalCloseEvent, DuetModalSize } from "./components/duet-modal/duet-modal";
 import { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer";
 import { DuetNumberInputEvent } from "./components/duet-number-input/duet-number-input";
+import { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination";
 import { DuetParagraphSize, DuetParagraphVariation, DuetParagraphWeight } from "./components/duet-paragraph/duet-paragraph";
 import { DuetRadioEvent } from "./components/duet-radio/duet-radio";
 import { DuetRangeChangeEvent } from "./components/duet-range-slider/duet-range-slider";
-import { DuetSelectEvent, DuetSelectItems } from "./components/duet-select/duet-select";
+import { DuetRangeStepperUpdateEvent } from "./components/duet-range-stepper/duet-range-stepper";
+import { DuetSelectEvent, DuetSelectItems, DuetSelectVariation } from "./components/duet-select/duet-select";
 import { DuetSpacerBreakpoint, DuetSpacerSize } from "./components/duet-spacer/duet-spacer";
 import { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner";
 import { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-step";
 import { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper";
 import { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group";
-import { DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant } from "./components/duet-table/duet-table";
+import { DuetTableBreakpoint as DuetTableBreakpoint1, DuetTableStickyDistance as DuetTableStickyDistance1, DuetTableVariant as DuetTableVariant1 } from "./components/duet-table/duet-table";
 import { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea";
 import { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle";
 import { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
+import { DuetEditableTableActions as DuetEditableTableActions1 } from "./components/duet-editable-table/duet-editable-table";
 import { StatusMessage } from "./components/duet-upload-aria-status/duet-upload-aria-status";
-import { DuetEditableTableGroupNames as DuetEditableTableGroupNames1 } from "./components/duet-editable-table/duet-editable-table";
-import { DuetUploadEvent, StringMap } from "./components/duet-upload/duet-upload";
+import { DuetUploadEvent, DuetUploadTableGroupName, StringMap } from "./components/duet-upload/duet-upload";
 import { StatusMessage as StatusMessage1 } from "./components/duet-upload-aria-status/duet-upload-aria-status";
 export namespace Components {
+    interface DuetActionButton {
+        /**
+          * Name of id of action that was called being called
+         */
+        "actionId": string;
+        /**
+          * Name of id of action that was called being called
+         */
+        "actionMeta": Record<any, any> | string;
+        /**
+          * Name of action being called
+         */
+        "actionName": string;
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls": string;
+        /**
+          * Described By id
+         */
+        "ariaDescribedBy": string;
+        /**
+          * Aria description the button
+         */
+        "ariaDescription": string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels": Record<string, string>;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabelsDefaults": DuetLangObject;
+        /**
+          * Custom color to be used for a background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary".
+         */
+        "background": DuetColor;
+        /**
+          * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead.
+         */
+        "color": DuetColor;
+        /**
+          * Disables the button
+         */
+        "disabled": boolean;
+        /**
+          * Color of the icon to display
+         */
+        "iconColor": string;
+        /**
+          * Name of the icon to display
+         */
+        "iconName": string;
+        /**
+          * Size of the icon
+         */
+        "iconSize": DuetActionButtonIconSize;
+        /**
+          * Theme of the pagination.
+         */
+        "theme": DuetTheme;
+    }
     interface DuetAlert {
         /**
           * Adds accessible label for the dismissible alert close button.
@@ -171,10 +234,18 @@ export namespace Components {
           * Indicates the id of a component owned by the button.
          */
         "accessibleOwns": string;
+        /**
+          * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
+        "accessiblePopup": string;
         /**
           * Tells screen reader the element is pressed.
          */
         "accessiblePressed": boolean;
+        /**
+          * Centers the text of a button
+         */
+        "centerText": DuetButtonTextCentering;
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
          */
@@ -769,93 +840,52 @@ export namespace Components {
          */
         "accessibleRole": string;
         /**
-          * Array of internationalized defaults for the default action labels.
-         */
-        "actionLabelDefaults": DuetLangObject;
-        /**
-          * Array of actions that are mapped via the map variable to the various groups defined in group.
+          * Define actions for all items in a table An alternative to inline HTML table. required for Sortable tables
           * @default undefined
-          * @example [{ variation: "default", icon: "action-edit-2", id: "edit", map: ["success"], label: {   fi: " Label",   en: " Label",   sv: " Label", } }]
-         */
-        "actions": DuetEditableTableActions | string;
-        /**
-          * Key used to set vertical alignment of action buttons
-         */
-        "alignment": string;
-        /**
-          * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
-          * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
-          * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
          */
-        "groups": DuetEditableTableGroupNames | string;
+        "actions": DuetEditableTableActions;
         /**
-          * Array of internationalized defaults for the default groups labels.
+          * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
-        "groupsLabelDefaults": DuetLangObject;
+        "breakpoint": DuetTableBreakpoint;
         /**
-          * Shows or hides the table labels.
+          * Define columns for a table An alternative to inline HTML table. required for Sortable tables
+          * @default undefined
          */
-        "hideGroups": boolean;
+        "columns": DuetEditableTableColumns;
         /**
-          * Map of items that contain list of things.
+          * Optional id that get passed to the table and used to setup ::parts
          */
-        "items": DuetEditableTableItems;
+        "groupId": string;
         /**
-          * Theme of the table.
+          * Duet-table: margin of the component.
          */
-        "theme": DuetTheme;
+        "margin": DuetMargin;
         /**
-          * Method to force an update of a tabular data array. when called the method will rerender the entire tabular structure.
+          * Define rows for a table An alternative to inline HTML table. required for Sortable tables
+          * @default undefined
          */
-        "updateTable": (passedItems?: DuetEditableTableItems) => Promise<void>;
-    }
-    interface DuetEditableTableButton {
+        "rows": DuetEditableTableRows;
         /**
-          * action items passed from host component
+          * Controls whether the table is sortable by headers
          */
-        "actions": DuetEditableTableActionButtonItems;
+        "sortable": boolean;
         /**
-          * group associated with action
+          * Duet-table: Controls whether the table has a sticky header. Sticky headers are not compatible with breakpoint="none-scrollable".
          */
-        "group": string;
+        "sticky": boolean;
         /**
-          * key of the item in the map
+          * Duet-table: Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky.
          */
-        "keyName": string;
+        "stickyDistance": DuetTableStickyDistance;
         /**
-          * Theme of the empty state component.
+          * Theme of the table.
          */
         "theme": DuetTheme;
         /**
-          * uid that gets passed along when the action is emitted
+          * Duet-table: Style variation of the table.
          */
-        "uid": string;
-    }
-    interface DuetEditableTableItem {
-        /**
-          * Actions that can be performed on the element
-         */
-        "actions": DuetEditableTableActions;
-        /**
-          * Key used to set vertical alignment of action buttons
-         */
-        "alignment": string;
-        /**
-          * Object of data itemsused to render the entire row
-         */
-        "data": DuetEditableTableItemData;
-        /**
-          * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
-         */
-        "groupId": string;
-        /**
-          * Key used to identify item, when running actions
-         */
-        "keyName": string;
-        /**
-          * Theme of the empty state component.
-         */
-        "theme": DuetTheme;
+        "variation": DuetTableVariant;
     }
     interface DuetEmptyState {
         /**
@@ -1848,6 +1878,48 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DuetPagination {
+        /**
+          * Default pagination labels
+         */
+        "accessibleLabels": Record<string, string>;
+        /**
+          * Default pagination labels
+         */
+        "accessibleLabelsDefaults": DuetLangObject;
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls": string;
+        /**
+          * The current page
+         */
+        "current": number;
+        /**
+          * Characters to use for the jump buttons.
+         */
+        "jumpString": string;
+        /**
+          * The size of the take, when paginating.
+         */
+        "take": number;
+        /**
+          * Theme of the pagination.
+         */
+        "theme": DuetTheme;
+        /**
+          * The total size of the paginating data
+         */
+        "total": number;
+        /**
+          * Variation of the paginator (compact and default supported)
+         */
+        "variation": DuetPaginationVariation;
+        /**
+          * Amount of visible page numbers to show
+         */
+        "visibleItems": number;
+    }
     interface DuetParagraph {
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
@@ -2122,6 +2194,39 @@ export namespace Components {
          */
         "value": number;
     }
+    interface DuetRangeStepper {
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls": string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels": Record<string, string>;
+        /**
+          * Default range stepper labels
+         */
+        "ariaLabelsDefaults": DuetLangObject;
+        /**
+          * Start value
+          * @default 1
+         */
+        "stepIndex": number;
+        /**
+          * How big is the step
+          * @default 99
+         */
+        "stepSize": number;
+        /**
+          * Theme of the component.
+         */
+        "theme": DuetTheme;
+        /**
+          * Total of
+          * @default undefined
+         */
+        "total": number;
+    }
     interface DuetScrollable {
         /**
           * Optional identifier to add to buttons in the tab group
@@ -2229,6 +2334,10 @@ export namespace Components {
           * The selected value of the select
          */
         "value": string;
+        /**
+          * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+         */
+        "variation": DuetSelectVariation;
     }
     interface DuetSpacer {
         /**
@@ -2712,7 +2821,7 @@ export namespace Components {
         /**
           * Default actions added to the internally used duet-editable-table
          */
-        "actions": DuetEditableTableActions | string;
+        "actions": DuetEditableTableActions;
         /**
           * Key used to set vertical alignment of action buttons
          */
@@ -2786,7 +2895,7 @@ export namespace Components {
           * @required 
           * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
          */
-        "groups": DuetEditableTableGroupNames | string;
+        "groups": DuetUploadTableGroupName[];
         /**
           * If set the upload component will not display an upload button, you will have to create one yourself and call the exposed method startUpload
          */
@@ -2917,6 +3026,12 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLDuetActionButtonElement extends Components.DuetActionButton, HTMLStencilElement {
+    }
+    var HTMLDuetActionButtonElement: {
+        prototype: HTMLDuetActionButtonElement;
+        new (): HTMLDuetActionButtonElement;
+    };
     interface HTMLDuetAlertElement extends Components.DuetAlert, HTMLStencilElement {
     }
     var HTMLDuetAlertElement: {
@@ -3007,18 +3122,6 @@ declare global {
         prototype: HTMLDuetEditableTableElement;
         new (): HTMLDuetEditableTableElement;
     };
-    interface HTMLDuetEditableTableButtonElement extends Components.DuetEditableTableButton, HTMLStencilElement {
-    }
-    var HTMLDuetEditableTableButtonElement: {
-        prototype: HTMLDuetEditableTableButtonElement;
-        new (): HTMLDuetEditableTableButtonElement;
-    };
-    interface HTMLDuetEditableTableItemElement extends Components.DuetEditableTableItem, HTMLStencilElement {
-    }
-    var HTMLDuetEditableTableItemElement: {
-        prototype: HTMLDuetEditableTableItemElement;
-        new (): HTMLDuetEditableTableItemElement;
-    };
     interface HTMLDuetEmptyStateElement extends Components.DuetEmptyState, HTMLStencilElement {
     }
     var HTMLDuetEmptyStateElement: {
@@ -3139,6 +3242,12 @@ declare global {
         prototype: HTMLDuetNumberInputElement;
         new (): HTMLDuetNumberInputElement;
     };
+    interface HTMLDuetPaginationElement extends Components.DuetPagination, HTMLStencilElement {
+    }
+    var HTMLDuetPaginationElement: {
+        prototype: HTMLDuetPaginationElement;
+        new (): HTMLDuetPaginationElement;
+    };
     interface HTMLDuetParagraphElement extends Components.DuetParagraph, HTMLStencilElement {
     }
     var HTMLDuetParagraphElement: {
@@ -3169,6 +3278,12 @@ declare global {
         prototype: HTMLDuetRangeSliderElement;
         new (): HTMLDuetRangeSliderElement;
     };
+    interface HTMLDuetRangeStepperElement extends Components.DuetRangeStepper, HTMLStencilElement {
+    }
+    var HTMLDuetRangeStepperElement: {
+        prototype: HTMLDuetRangeStepperElement;
+        new (): HTMLDuetRangeStepperElement;
+    };
     interface HTMLDuetScrollableElement extends Components.DuetScrollable, HTMLStencilElement {
     }
     var HTMLDuetScrollableElement: {
@@ -3266,6 +3381,7 @@ declare global {
         new (): HTMLDuetVisuallyHiddenElement;
     };
     interface HTMLElementTagNameMap {
+        "duet-action-button": HTMLDuetActionButtonElement;
         "duet-alert": HTMLDuetAlertElement;
         "duet-badge": HTMLDuetBadgeElement;
         "duet-breadcrumb": HTMLDuetBreadcrumbElement;
@@ -3281,8 +3397,6 @@ declare global {
         "duet-date-picker": HTMLDuetDatePickerElement;
         "duet-divider": HTMLDuetDividerElement;
         "duet-editable-table": HTMLDuetEditableTableElement;
-        "duet-editable-table-button": HTMLDuetEditableTableButtonElement;
-        "duet-editable-table-item": HTMLDuetEditableTableItemElement;
         "duet-empty-state": HTMLDuetEmptyStateElement;
         "duet-fieldset": HTMLDuetFieldsetElement;
         "duet-footer": HTMLDuetFooterElement;
@@ -3303,11 +3417,13 @@ declare global {
         "duet-notification": HTMLDuetNotificationElement;
         "duet-notification-drawer": HTMLDuetNotificationDrawerElement;
         "duet-number-input": HTMLDuetNumberInputElement;
+        "duet-pagination": HTMLDuetPaginationElement;
         "duet-paragraph": HTMLDuetParagraphElement;
         "duet-progress": HTMLDuetProgressElement;
         "duet-radio": HTMLDuetRadioElement;
         "duet-radio-group": HTMLDuetRadioGroupElement;
         "duet-range-slider": HTMLDuetRangeSliderElement;
+        "duet-range-stepper": HTMLDuetRangeStepperElement;
         "duet-scrollable": HTMLDuetScrollableElement;
         "duet-select": HTMLDuetSelectElement;
         "duet-spacer": HTMLDuetSpacerElement;
@@ -3327,6 +3443,72 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface DuetActionButton {
+        /**
+          * Name of id of action that was called being called
+         */
+        "actionId"?: string;
+        /**
+          * Name of id of action that was called being called
+         */
+        "actionMeta"?: Record<any, any> | string;
+        /**
+          * Name of action being called
+         */
+        "actionName"?: string;
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls"?: string;
+        /**
+          * Described By id
+         */
+        "ariaDescribedBy"?: string;
+        /**
+          * Aria description the button
+         */
+        "ariaDescription"?: string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels"?: Record<string, string>;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabelsDefaults"?: DuetLangObject;
+        /**
+          * Custom color to be used for a background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary".
+         */
+        "background"?: DuetColor;
+        /**
+          * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead.
+         */
+        "color"?: DuetColor;
+        /**
+          * Disables the button
+         */
+        "disabled"?: boolean;
+        /**
+          * Color of the icon to display
+         */
+        "iconColor"?: string;
+        /**
+          * Name of the icon to display
+         */
+        "iconName"?: string;
+        /**
+          * Size of the icon
+         */
+        "iconSize"?: DuetActionButtonIconSize;
+        /**
+          * Emitted a page selection has been made
+         */
+        "onDuetActionEvent"?: (event: CustomEvent<DuetActionButtonEvent>) => void;
+        /**
+          * Theme of the pagination.
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetAlert {
         /**
           * Adds accessible label for the dismissible alert close button.
@@ -3448,10 +3630,18 @@ declare namespace LocalJSX {
           * Indicates the id of a component owned by the button.
          */
         "accessibleOwns"?: string;
+        /**
+          * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
+        "accessiblePopup"?: string;
         /**
           * Tells screen reader the element is pressed.
          */
         "accessiblePressed"?: boolean;
+        /**
+          * Centers the text of a button
+         */
+        "centerText"?: DuetButtonTextCentering;
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
          */
@@ -4067,77 +4257,60 @@ declare namespace LocalJSX {
          */
         "accessibleRole"?: string;
         /**
-          * Array of internationalized defaults for the default action labels.
-         */
-        "actionLabelDefaults"?: DuetLangObject;
-        /**
-          * Array of actions that are mapped via the map variable to the various groups defined in group.
+          * Define actions for all items in a table An alternative to inline HTML table. required for Sortable tables
           * @default undefined
-          * @example [{ variation: "default", icon: "action-edit-2", id: "edit", map: ["success"], label: {   fi: " Label",   en: " Label",   sv: " Label", } }]
-         */
-        "actions"?: DuetEditableTableActions | string;
-        /**
-          * Key used to set vertical alignment of action buttons
-         */
-        "alignment"?: string;
-        /**
-          * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
-          * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
-          * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
          */
-        "groups"?: DuetEditableTableGroupNames | string;
+        "actions"?: DuetEditableTableActions;
         /**
-          * Array of internationalized defaults for the default groups labels.
+          * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
-        "groupsLabelDefaults"?: DuetLangObject;
+        "breakpoint"?: DuetTableBreakpoint;
         /**
-          * Shows or hides the table labels.
+          * Define columns for a table An alternative to inline HTML table. required for Sortable tables
+          * @default undefined
          */
-        "hideGroups"?: boolean;
+        "columns"?: DuetEditableTableColumns;
         /**
-          * Map of items that contain list of things.
+          * Optional id that get passed to the table and used to setup ::parts
          */
-        "items"?: DuetEditableTableItems;
+        "groupId"?: string;
         /**
-          * Theme of the table.
+          * Duet-table: margin of the component.
          */
-        "theme"?: DuetTheme;
-    }
-    interface DuetEditableTableButton {
+        "margin"?: DuetMargin;
         /**
-          * Emitted when any action is clicked
+          * Event emitted when table is sortable and a header item is clicked/enter is pressed
          */
-        "onDuetEditableItemAction"?: (event: CustomEvent<DuetEditableTableItemEvent>) => void;
+        "onDuetMenuClick"?: (event: CustomEvent<DuetTableMenuEvent>) => void;
         /**
-          * Theme of the empty state component.
+          * Event emitted when table is sortable and a header item is clicked/enter is pressed
          */
-        "theme"?: DuetTheme;
-    }
-    interface DuetEditableTableItem {
+        "onDuetTableToggle"?: (event: CustomEvent<DuetTableToggleEvent>) => void;
         /**
-          * Actions that can be performed on the element
+          * Define rows for a table An alternative to inline HTML table. required for Sortable tables
+          * @default undefined
          */
-        "actions"?: DuetEditableTableActions;
+        "rows"?: DuetEditableTableRows;
         /**
-          * Key used to set vertical alignment of action buttons
+          * Controls whether the table is sortable by headers
          */
-        "alignment"?: string;
+        "sortable"?: boolean;
         /**
-          * Object of data itemsused to render the entire row
+          * Duet-table: Controls whether the table has a sticky header. Sticky headers are not compatible with breakpoint="none-scrollable".
          */
-        "data"?: DuetEditableTableItemData;
+        "sticky"?: boolean;
         /**
-          * Key used to identify item, when running actions
+          * Duet-table: Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky.
          */
-        "keyName"?: string;
+        "stickyDistance"?: DuetTableStickyDistance;
         /**
-          * Emitted when any action is clicked
+          * Theme of the table.
          */
-        "onDuetEditableItemAction"?: (event: CustomEvent<DuetEditableTableItemEvent>) => void;
+        "theme"?: DuetTheme;
         /**
-          * Theme of the empty state component.
+          * Duet-table: Style variation of the table.
          */
-        "theme"?: DuetTheme;
+        "variation"?: DuetTableVariant;
     }
     interface DuetEmptyState {
         /**
@@ -5193,6 +5366,52 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DuetPagination {
+        /**
+          * Default pagination labels
+         */
+        "accessibleLabels"?: Record<string, string>;
+        /**
+          * Default pagination labels
+         */
+        "accessibleLabelsDefaults"?: DuetLangObject;
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls"?: string;
+        /**
+          * The current page
+         */
+        "current"?: number;
+        /**
+          * Characters to use for the jump buttons.
+         */
+        "jumpString"?: string;
+        /**
+          * Emitted a page selection has been made
+         */
+        "onDuetPageChange"?: (event: CustomEvent<DuetPaginationPageEvent>) => void;
+        /**
+          * The size of the take, when paginating.
+         */
+        "take"?: number;
+        /**
+          * Theme of the pagination.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * The total size of the paginating data
+         */
+        "total"?: number;
+        /**
+          * Variation of the paginator (compact and default supported)
+         */
+        "variation"?: DuetPaginationVariation;
+        /**
+          * Amount of visible page numbers to show
+         */
+        "visibleItems"?: number;
+    }
     interface DuetParagraph {
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
@@ -5476,6 +5695,43 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    interface DuetRangeStepper {
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls"?: string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels"?: Record<string, string>;
+        /**
+          * Default range stepper labels
+         */
+        "ariaLabelsDefaults"?: DuetLangObject;
+        /**
+          * Event emitted when the step heading is clicked.
+         */
+        "onDuetRangeStepUpdate"?: (event: CustomEvent<DuetRangeStepperUpdateEvent>) => void;
+        /**
+          * Start value
+          * @default 1
+         */
+        "stepIndex"?: number;
+        /**
+          * How big is the step
+          * @default 99
+         */
+        "stepSize"?: number;
+        /**
+          * Theme of the component.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * Total of
+          * @default undefined
+         */
+        "total"?: number;
+    }
     interface DuetScrollable {
         /**
           * Optional identifier to add to buttons in the tab group
@@ -5591,6 +5847,10 @@ declare namespace LocalJSX {
           * The selected value of the select
          */
         "value"?: string;
+        /**
+          * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+         */
+        "variation"?: DuetSelectVariation;
     }
     interface DuetSpacer {
         /**
@@ -6084,7 +6344,7 @@ declare namespace LocalJSX {
         /**
           * Default actions added to the internally used duet-editable-table
          */
-        "actions"?: DuetEditableTableActions | string;
+        "actions"?: DuetEditableTableActions;
         /**
           * Key used to set vertical alignment of action buttons
          */
@@ -6154,7 +6414,7 @@ declare namespace LocalJSX {
           * @required 
           * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
          */
-        "groups"?: DuetEditableTableGroupNames | string;
+        "groups"?: DuetUploadTableGroupName[];
         /**
           * If set the upload component will not display an upload button, you will have to create one yourself and call the exposed method startUpload
          */
@@ -6304,6 +6564,7 @@ declare namespace LocalJSX {
     interface DuetVisuallyHidden {
     }
     interface IntrinsicElements {
+        "duet-action-button": DuetActionButton;
         "duet-alert": DuetAlert;
         "duet-badge": DuetBadge;
         "duet-breadcrumb": DuetBreadcrumb;
@@ -6319,8 +6580,6 @@ declare namespace LocalJSX {
         "duet-date-picker": DuetDatePicker;
         "duet-divider": DuetDivider;
         "duet-editable-table": DuetEditableTable;
-        "duet-editable-table-button": DuetEditableTableButton;
-        "duet-editable-table-item": DuetEditableTableItem;
         "duet-empty-state": DuetEmptyState;
         "duet-fieldset": DuetFieldset;
         "duet-footer": DuetFooter;
@@ -6341,11 +6600,13 @@ declare namespace LocalJSX {
         "duet-notification": DuetNotification;
         "duet-notification-drawer": DuetNotificationDrawer;
         "duet-number-input": DuetNumberInput;
+        "duet-pagination": DuetPagination;
         "duet-paragraph": DuetParagraph;
         "duet-progress": DuetProgress;
         "duet-radio": DuetRadio;
         "duet-radio-group": DuetRadioGroup;
         "duet-range-slider": DuetRangeSlider;
+        "duet-range-stepper": DuetRangeStepper;
         "duet-scrollable": DuetScrollable;
         "duet-select": DuetSelect;
         "duet-spacer": DuetSpacer;
@@ -6368,6 +6629,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "duet-action-button": LocalJSX.DuetActionButton & JSXBase.HTMLAttributes<HTMLDuetActionButtonElement>;
             "duet-alert": LocalJSX.DuetAlert & JSXBase.HTMLAttributes<HTMLDuetAlertElement>;
             "duet-badge": LocalJSX.DuetBadge & JSXBase.HTMLAttributes<HTMLDuetBadgeElement>;
             "duet-breadcrumb": LocalJSX.DuetBreadcrumb & JSXBase.HTMLAttributes<HTMLDuetBreadcrumbElement>;
@@ -6383,8 +6645,6 @@ declare module "@stencil/core" {
             "duet-date-picker": LocalJSX.DuetDatePicker & JSXBase.HTMLAttributes<HTMLDuetDatePickerElement>;
             "duet-divider": LocalJSX.DuetDivider & JSXBase.HTMLAttributes<HTMLDuetDividerElement>;
             "duet-editable-table": LocalJSX.DuetEditableTable & JSXBase.HTMLAttributes<HTMLDuetEditableTableElement>;
-            "duet-editable-table-button": LocalJSX.DuetEditableTableButton & JSXBase.HTMLAttributes<HTMLDuetEditableTableButtonElement>;
-            "duet-editable-table-item": LocalJSX.DuetEditableTableItem & JSXBase.HTMLAttributes<HTMLDuetEditableTableItemElement>;
             "duet-empty-state": LocalJSX.DuetEmptyState & JSXBase.HTMLAttributes<HTMLDuetEmptyStateElement>;
             "duet-fieldset": LocalJSX.DuetFieldset & JSXBase.HTMLAttributes<HTMLDuetFieldsetElement>;
             "duet-footer": LocalJSX.DuetFooter & JSXBase.HTMLAttributes<HTMLDuetFooterElement>;
@@ -6405,11 +6665,13 @@ declare module "@stencil/core" {
             "duet-notification": LocalJSX.DuetNotification & JSXBase.HTMLAttributes<HTMLDuetNotificationElement>;
             "duet-notification-drawer": LocalJSX.DuetNotificationDrawer & JSXBase.HTMLAttributes<HTMLDuetNotificationDrawerElement>;
             "duet-number-input": LocalJSX.DuetNumberInput & JSXBase.HTMLAttributes<HTMLDuetNumberInputElement>;
+            "duet-pagination": LocalJSX.DuetPagination & JSXBase.HTMLAttributes<HTMLDuetPaginationElement>;
             "duet-paragraph": LocalJSX.DuetParagraph & JSXBase.HTMLAttributes<HTMLDuetParagraphElement>;
             "duet-progress": LocalJSX.DuetProgress & JSXBase.HTMLAttributes<HTMLDuetProgressElement>;
             "duet-radio": LocalJSX.DuetRadio & JSXBase.HTMLAttributes<HTMLDuetRadioElement>;
             "duet-radio-group": LocalJSX.DuetRadioGroup & JSXBase.HTMLAttributes<HTMLDuetRadioGroupElement>;
             "duet-range-slider": LocalJSX.DuetRangeSlider & JSXBase.HTMLAttributes<HTMLDuetRangeSliderElement>;
+            "duet-range-stepper": LocalJSX.DuetRangeStepper & JSXBase.HTMLAttributes<HTMLDuetRangeStepperElement>;
             "duet-scrollable": LocalJSX.DuetScrollable & JSXBase.HTMLAttributes<HTMLDuetScrollableElement>;
             "duet-select": LocalJSX.DuetSelect & JSXBase.HTMLAttributes<HTMLDuetSelectElement>;
             "duet-spacer": LocalJSX.DuetSpacer & JSXBase.HTMLAttributes<HTMLDuetSpacerElement>;