@duetds/components 4.31.0 → 4.33.2

package/lib/types/components.d.ts

@@ -17,6 +17,10 @@ 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 { 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";
@@ -32,7 +36,7 @@ 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 { DuetParagraphSize, DuetParagraphVariation } from "./components/duet-paragraph/duet-paragraph";
+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";
@@ -45,6 +49,10 @@ import { DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant } from "
 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 { 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 { StatusMessage as StatusMessage1 } from "./components/duet-upload-aria-status/duet-upload-aria-status";
 export namespace Components {
     interface DuetAlert {
         /**
@@ -402,7 +410,7 @@ export namespace Components {
          */
         "accessibleControls": string;
         /**
-          * Indicates the id of a component that describes the choice.
+          * Indicates the id of a component that describes the choice. if this is set to an empty string it will prevent screenreaders from flowing to a collapsible content and can be used as an escape hatch if that behaviour is undesired.
          */
         "accessibleDescribedBy": string;
         /**
@@ -449,6 +457,16 @@ export namespace Components {
           * Adds a unique identifier for the choice button.
          */
         "identifier": string;
+        /**
+          * Hint text to display before the user types into the date picker input.
+          * @default { fi: "Lisätietoja", en: "More information about", sv: "Mera information om", }
+         */
+        "infoLabel": string;
+        /**
+          * Placeholder defaults
+          * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        "infoLabelDefaults": DuetLangObject | string;
         /**
           * Label for the choice button.
          */
@@ -602,7 +620,7 @@ export namespace Components {
          */
         "accessibleOwns": string;
         /**
-          * Caption (underneath label) that can be set as a way of adding extra information
+          * Caption (underneath label) that can be set as a way of adding extra information.
          */
         "caption": string;
         /**
@@ -642,8 +660,8 @@ export namespace Components {
          */
         "labelHidden": boolean;
         /**
-          * The currently active language. This setting changes the month/year/day names and button labels as well as all screen reader labels.
-          * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+          * The currently active language. This setting changes the month/year/day. names and button labels as well as all screen reader labels.
+          * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
           * @default "fi"
          */
         "language": DuetLanguage;
@@ -652,7 +670,7 @@ export namespace Components {
          */
         "margin": DuetMargin;
         /**
-          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD This setting can be used alone or together with the min property.
+          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.
          */
         "max": string;
         /**
@@ -669,7 +687,7 @@ export namespace Components {
          */
         "placeholder": string;
         /**
-          * Placeholder defaults
+          * Placeholder defaults.
           * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
          */
         "placeholderDefaults": DuetLangObject | string;
@@ -720,6 +738,92 @@ export namespace Components {
          */
         "theme": DuetTheme;
     }
+    interface DuetEditableTable {
+        /**
+          * Exposes the aria role for optimizing accessibility.
+         */
+        "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.
+          * @default undefined
+          * @example [{ variation: "default", icon: "action-edit-2", id: "edit", map: ["success"], label: {   fi: " Label",   en: " Label",   sv: " Label", } }]
+         */
+        "actions": DuetEditableTableActions | 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;
+        /**
+          * Array of internationalized defaults for the default groups labels.
+         */
+        "groupsLabelDefaults": DuetLangObject;
+        /**
+          * Shows or hides the table labels.
+         */
+        "hideGroups": boolean;
+        /**
+          * Map of items that contain list of things.
+         */
+        "items": DuetEditableTableItems;
+        /**
+          * Theme of the table.
+         */
+        "theme": DuetTheme;
+        /**
+          * Method to force an update of a tabular data array. when called the method will rerender the entire tabular structure.
+         */
+        "updateTable": (passedItems?: DuetEditableTableItems) => Promise<void>;
+    }
+    interface DuetEditableTableButton {
+        /**
+          * action items passed from host component
+         */
+        "actions": DuetEditableTableActionButtonItems;
+        /**
+          * group associated with action
+         */
+        "group": string;
+        /**
+          * key of the item in the map
+         */
+        "keyName": string;
+        /**
+          * Theme of the empty state component.
+         */
+        "theme": DuetTheme;
+        /**
+          * uid that gets passed along when the action is emitted
+         */
+        "uid": string;
+    }
+    interface DuetEditableTableItem {
+        /**
+          * Actions that can be performed on the element
+         */
+        "actions": DuetEditableTableActions;
+        /**
+          * 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;
+    }
     interface DuetEmptyState {
         /**
           * Icon shown in the empty state component.
@@ -804,7 +908,7 @@ export namespace Components {
     }
     interface DuetGrid {
         /**
-          * Adjusts the vertical alignment of the grid items.
+          * Adjusts the vertical alignment of the grid items, if set to "form_distribute" the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items, so that they align even when displaying errors.
          */
         "alignment": DuetGridAlignment;
         /**
@@ -948,9 +1052,9 @@ export namespace Components {
     }
     interface DuetHeading {
         /**
-          * Enable or disable the border underneath the heading.
+          * Enable or disable the border underneath the heading, solid will darken the border
          */
-        "border": boolean;
+        "border": boolean | "solid";
         /**
           * Custom color for the heading as a design token entered in camelCase or kebab-case. Example: "color-primary".
          */
@@ -1717,13 +1821,52 @@ export namespace Components {
          */
         "size": DuetParagraphSize;
         /**
-          * Theme of the card.
+          * Theme of the paragraph.
          */
         "theme": DuetTheme;
         /**
           * Style variation of the paragraph.
          */
         "variation": DuetParagraphVariation;
+        /**
+          * Controls the Font-Weight of the paragraph.
+         */
+        "weight": DuetParagraphWeight;
+    }
+    interface DuetProgress {
+        /**
+          * Indicates the id of a component that describes the upload component.
+         */
+        "accessibleDescribedBy": string;
+        /**
+          * Indicates the aria-label of the component - this will get combined with an label+uploading when uploading, and label+upload complete when upload is complete
+         */
+        "accessibleLabel": string;
+        /**
+          * Adds accessible label for upload in progress and upload complete states
+          * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+         */
+        "accessibleLabelUpload": string;
+        /**
+          * Defaults for accessibleLabel
+         */
+        "accessibleLabelUploadDefaults": DuetLangObject | string;
+        /**
+          * Caption (underneath label) that can be set as a way of adding extra information
+         */
+        "caption": string;
+        /**
+          * Height of progressbar
+         */
+        "height": string;
+        /**
+          * Progress of the bar, a value from 0-100
+         */
+        "progress": number;
+        /**
+          * Theme of the input.
+         */
+        "theme": DuetTheme;
     }
     interface DuetRadio {
         /**
@@ -2468,6 +2611,223 @@ export namespace Components {
          */
         "theme": DuetTheme;
     }
+    interface DuetUpload {
+        /**
+          * Indicates the id of a related component’s visually focused element.
+         */
+        "accessibleActiveDescendant": string;
+        /**
+          * accessible aria-Label of button
+         */
+        "accessibleButtonLabel": string;
+        /**
+          * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
+         */
+        "accessibleControls": string;
+        /**
+          * Indicates the id of a component that describes the upload component.
+         */
+        "accessibleDescribedBy": string;
+        /**
+          * Indicates the id of a component owned by the input.
+         */
+        "accessibleOwns": string;
+        /**
+          * Default actions added to the internally used duet-editable-table
+         */
+        "actions": DuetEditableTableActions | string;
+        /**
+          * A string of commaseperated file type values that are allowed
+          * @example : .pdf,.doc,.docx
+         */
+        "allowedExtensions": string;
+        /**
+          * A string of commaseperated mime type values that are allowed
+          * @example : image/*,application/msword,
+         */
+        "allowedMimetypes": string;
+        /**
+          * Label of button
+          * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
+         */
+        "buttonLabel": string;
+        /**
+          * Property to change button label defaults on the component.
+          * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment", }
+         */
+        "buttonLabelDefaults": DuetLangObject | string;
+        /**
+          * Caption (underneath label) that can be set as a way of adding extra information
+         */
+        "caption": string;
+        /**
+          * Description for the upload component.
+          * @default { fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.", sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.", en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.", }
+         */
+        "description": string;
+        /**
+          * Property to change descriptionDefaults defaults on the component.
+          * @default { fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.", sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.", en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.", }
+         */
+        "descriptionDefaults": DuetLangObject | string;
+        /**
+          * Makes the input component disabled. This prevents users from being able to interact with the upload component, and conveys its inactive state to assistive technologies.
+         */
+        "disabled": boolean;
+        /**
+          * Display the input in error state along with an error message.
+         */
+        "error": string;
+        /**
+          * If external is set to true, the upload component will not actually upload the files, but only keep states it will be up to you to handle the upload and return progress information to the upload-component
+         */
+        "external": boolean;
+        /**
+          * Label for the filelist's empty state.
+          * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."}
+         */
+        "fileListEmpty": string;
+        /**
+          * Defaults for the filelist's empty state.
+          * @default { fi: "Ei vielä lisättyjä tiedostoja.", sv: "Inga filer har lagts till ännu.", en: "No files added yet.", }
+         */
+        "fileListEmptyDefaults": DuetLangObject | string;
+        /**
+          * Map of string that contain list of uploaded files.
+         */
+        "files": StringMap;
+        /**
+          * Get list of files, divided in errors and valid sections
+         */
+        "getFiles": () => Promise<false | { valid: any[]; invalid: any[]; }>;
+        /**
+          * Array of group names that you want the editable table to use to display files
+          * @required 
+          * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+         */
+        "groups": DuetEditableTableGroupNames | string;
+        /**
+          * If set the upload component will not display an upload button, you will have to create one yourself and call the exposed method startUpload
+         */
+        "hideButton": boolean;
+        /**
+          * Visually hides the groups labels in the editable table list used to display the list of files
+         */
+        "hideGroups": boolean;
+        /**
+          * Adds a unique identifier for the upload component.
+         */
+        "identifier": string;
+        /**
+          * Label for the input.
+          * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        "label": string;
+        /**
+          * Property to change labelDefaults defaults on the component. normally you would handle these strings on an application level and override @label when needed
+          * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        "labelDefaults": DuetLangObject | string;
+        /**
+          * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files, by default this is off, setting this to true will limit the users choices to what has been explicitly set
+         */
+        "limitSelection": boolean;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin": DuetMargin;
+        /**
+          * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
+         */
+        "maxBytes": number;
+        /**
+          * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
+         */
+        "maxBytesTotal": number;
+        /**
+          * Use maxFiles to specify the maximum amount of files that can be uploaded
+         */
+        "maxFiles": number;
+        /**
+          * Use multiple to allow the user to select multiple files when uploading
+         */
+        "multiple": boolean;
+        /**
+          * Name of the upload component.
+         */
+        "name": string;
+        /**
+          * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the specified `duet-input`. Use this method instead of the global `input.focus()`.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * If enabled the editable-table will display links on successfully uploaded items, this requires the server can respond with link URIs in the correct format and that the files are accessible to the user
+         */
+        "showLinks": boolean;
+        /**
+          * Property to change the aria upload progress text read aloud by screenreaders
+          * @default { fi: { inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta", inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä", done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti", doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä", files: "tiedostot", file: "tiedosto", }, sv: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades", done: "Alla {filesTotal} har lagts till", doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades", files: "filer", file: "fil", }, en: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed", done: "All {filesTotal} added successfully", doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors", files: "tiedostoa", file: "tiedosto", }, }
+         */
+        "statusLabelDefaults": DuetLangObject | string;
+        /**
+          * Strings used for the status aria-label
+         */
+        "statusMessageLabel": StatusMessage | string;
+        /**
+          * Theme of the input.
+         */
+        "theme": DuetTheme;
+        /**
+          * Convenience method for updating the value of a key:value inside an item in the files attribute
+         */
+        "updateValue": (item: string, key: string, value: any) => Promise<void>;
+        /**
+          * Method for invoking the upload sequence
+         */
+        "upload": (metaData?: any | undefined) => Promise<void>;
+        /**
+          * Endpoint URI that is capable of receiving the files
+         */
+        "uri": string;
+        /**
+          * Property to read if the internally used editable-table contains errors or not
+         */
+        "valid": boolean;
+        /**
+          * Value of the input.
+         */
+        "value": string;
+    }
+    interface DuetUploadAriaStatus {
+        /**
+          * Adds accessible label that is read aloud
+         */
+        "accessibleAriaLive": "off" | "polite" | "assertive";
+        /**
+          * valid file amount
+         */
+        "inprogress": number;
+        /**
+          * invalid file amount
+         */
+        "invalid": number;
+        /**
+          * Status labels used in the component
+         */
+        "statusMessageLabel": StatusMessage;
+        /**
+          * total files
+         */
+        "total": number;
+        /**
+          * valid file amount
+         */
+        "valid": number;
+    }
     interface DuetVisuallyHidden {
     }
 }
@@ -2544,6 +2904,24 @@ declare global {
         prototype: HTMLDuetDividerElement;
         new (): HTMLDuetDividerElement;
     };
+    interface HTMLDuetEditableTableElement extends Components.DuetEditableTable, HTMLStencilElement {
+    }
+    var HTMLDuetEditableTableElement: {
+        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: {
@@ -2670,6 +3048,12 @@ declare global {
         prototype: HTMLDuetParagraphElement;
         new (): HTMLDuetParagraphElement;
     };
+    interface HTMLDuetProgressElement extends Components.DuetProgress, HTMLStencilElement {
+    }
+    var HTMLDuetProgressElement: {
+        prototype: HTMLDuetProgressElement;
+        new (): HTMLDuetProgressElement;
+    };
     interface HTMLDuetRadioElement extends Components.DuetRadio, HTMLStencilElement {
     }
     var HTMLDuetRadioElement: {
@@ -2760,6 +3144,18 @@ declare global {
         prototype: HTMLDuetTrayElement;
         new (): HTMLDuetTrayElement;
     };
+    interface HTMLDuetUploadElement extends Components.DuetUpload, HTMLStencilElement {
+    }
+    var HTMLDuetUploadElement: {
+        prototype: HTMLDuetUploadElement;
+        new (): HTMLDuetUploadElement;
+    };
+    interface HTMLDuetUploadAriaStatusElement extends Components.DuetUploadAriaStatus, HTMLStencilElement {
+    }
+    var HTMLDuetUploadAriaStatusElement: {
+        prototype: HTMLDuetUploadAriaStatusElement;
+        new (): HTMLDuetUploadAriaStatusElement;
+    };
     interface HTMLDuetVisuallyHiddenElement extends Components.DuetVisuallyHidden, HTMLStencilElement {
     }
     var HTMLDuetVisuallyHiddenElement: {
@@ -2779,6 +3175,9 @@ declare global {
         "duet-cookie-consent": HTMLDuetCookieConsentElement;
         "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;
@@ -2800,6 +3199,7 @@ declare global {
         "duet-notification-drawer": HTMLDuetNotificationDrawerElement;
         "duet-number-input": HTMLDuetNumberInputElement;
         "duet-paragraph": HTMLDuetParagraphElement;
+        "duet-progress": HTMLDuetProgressElement;
         "duet-radio": HTMLDuetRadioElement;
         "duet-radio-group": HTMLDuetRadioGroupElement;
         "duet-range-slider": HTMLDuetRangeSliderElement;
@@ -2815,6 +3215,8 @@ declare global {
         "duet-toggle": HTMLDuetToggleElement;
         "duet-tooltip": HTMLDuetTooltipElement;
         "duet-tray": HTMLDuetTrayElement;
+        "duet-upload": HTMLDuetUploadElement;
+        "duet-upload-aria-status": HTMLDuetUploadAriaStatusElement;
         "duet-visually-hidden": HTMLDuetVisuallyHiddenElement;
     }
 }
@@ -3191,7 +3593,7 @@ declare namespace LocalJSX {
          */
         "accessibleControls"?: string;
         /**
-          * Indicates the id of a component that describes the choice.
+          * Indicates the id of a component that describes the choice. if this is set to an empty string it will prevent screenreaders from flowing to a collapsible content and can be used as an escape hatch if that behaviour is undesired.
          */
         "accessibleDescribedBy"?: string;
         /**
@@ -3235,6 +3637,16 @@ declare namespace LocalJSX {
           * Adds a unique identifier for the choice button.
          */
         "identifier"?: string;
+        /**
+          * Hint text to display before the user types into the date picker input.
+          * @default { fi: "Lisätietoja", en: "More information about", sv: "Mera information om", }
+         */
+        "infoLabel"?: string;
+        /**
+          * Placeholder defaults
+          * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        "infoLabelDefaults"?: DuetLangObject | string;
         /**
           * Label for the choice button.
          */
@@ -3400,7 +3812,7 @@ declare namespace LocalJSX {
          */
         "accessibleOwns"?: string;
         /**
-          * Caption (underneath label) that can be set as a way of adding extra information
+          * Caption (underneath label) that can be set as a way of adding extra information.
          */
         "caption"?: string;
         /**
@@ -3436,8 +3848,8 @@ declare namespace LocalJSX {
          */
         "labelHidden"?: boolean;
         /**
-          * The currently active language. This setting changes the month/year/day names and button labels as well as all screen reader labels.
-          * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+          * The currently active language. This setting changes the month/year/day. names and button labels as well as all screen reader labels.
+          * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
           * @default "fi"
          */
         "language"?: DuetLanguage;
@@ -3446,7 +3858,7 @@ declare namespace LocalJSX {
          */
         "margin"?: DuetMargin;
         /**
-          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD This setting can be used alone or together with the min property.
+          * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.
          */
         "max"?: string;
         /**
@@ -3475,7 +3887,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * Placeholder defaults
+          * Placeholder defaults.
           * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
          */
         "placeholderDefaults"?: DuetLangObject | string;
@@ -3518,6 +3930,76 @@ declare namespace LocalJSX {
          */
         "theme"?: DuetTheme;
     }
+    interface DuetEditableTable {
+        /**
+          * Exposes the aria role for optimizing accessibility.
+         */
+        "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.
+          * @default undefined
+          * @example [{ variation: "default", icon: "action-edit-2", id: "edit", map: ["success"], label: {   fi: " Label",   en: " Label",   sv: " Label", } }]
+         */
+        "actions"?: DuetEditableTableActions | 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;
+        /**
+          * Array of internationalized defaults for the default groups labels.
+         */
+        "groupsLabelDefaults"?: DuetLangObject;
+        /**
+          * Shows or hides the table labels.
+         */
+        "hideGroups"?: boolean;
+        /**
+          * Map of items that contain list of things.
+         */
+        "items"?: DuetEditableTableItems;
+        /**
+          * Theme of the table.
+         */
+        "theme"?: DuetTheme;
+    }
+    interface DuetEditableTableButton {
+        /**
+          * Emitted when any action is clicked
+         */
+        "onDuetEditableItemAction"?: (event: CustomEvent<DuetEditableTableItemEvent>) => void;
+        /**
+          * Theme of the empty state component.
+         */
+        "theme"?: DuetTheme;
+    }
+    interface DuetEditableTableItem {
+        /**
+          * Actions that can be performed on the element
+         */
+        "actions"?: DuetEditableTableActions;
+        /**
+          * Object of data itemsused to render the entire row
+         */
+        "data"?: DuetEditableTableItemData;
+        /**
+          * Key used to identify item, when running actions
+         */
+        "keyName"?: string;
+        /**
+          * Emitted when any action is clicked
+         */
+        "onDuetEditableItemAction"?: (event: CustomEvent<DuetEditableTableItemEvent>) => void;
+        /**
+          * Theme of the empty state component.
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetEmptyState {
         /**
           * Icon shown in the empty state component.
@@ -3622,7 +4104,7 @@ declare namespace LocalJSX {
     }
     interface DuetGrid {
         /**
-          * Adjusts the vertical alignment of the grid items.
+          * Adjusts the vertical alignment of the grid items, if set to "form_distribute" the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items, so that they align even when displaying errors.
          */
         "alignment"?: DuetGridAlignment;
         /**
@@ -3796,9 +4278,9 @@ declare namespace LocalJSX {
     }
     interface DuetHeading {
         /**
-          * Enable or disable the border underneath the heading.
+          * Enable or disable the border underneath the heading, solid will darken the border
          */
-        "border"?: boolean;
+        "border"?: boolean | "solid";
         /**
           * Custom color for the heading as a design token entered in camelCase or kebab-case. Example: "color-primary".
          */
@@ -4574,13 +5056,52 @@ declare namespace LocalJSX {
          */
         "size"?: DuetParagraphSize;
         /**
-          * Theme of the card.
+          * Theme of the paragraph.
          */
         "theme"?: DuetTheme;
         /**
           * Style variation of the paragraph.
          */
         "variation"?: DuetParagraphVariation;
+        /**
+          * Controls the Font-Weight of the paragraph.
+         */
+        "weight"?: DuetParagraphWeight;
+    }
+    interface DuetProgress {
+        /**
+          * Indicates the id of a component that describes the upload component.
+         */
+        "accessibleDescribedBy"?: string;
+        /**
+          * Indicates the aria-label of the component - this will get combined with an label+uploading when uploading, and label+upload complete when upload is complete
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Adds accessible label for upload in progress and upload complete states
+          * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+         */
+        "accessibleLabelUpload"?: string;
+        /**
+          * Defaults for accessibleLabel
+         */
+        "accessibleLabelUploadDefaults"?: DuetLangObject | string;
+        /**
+          * Caption (underneath label) that can be set as a way of adding extra information
+         */
+        "caption"?: string;
+        /**
+          * Height of progressbar
+         */
+        "height"?: string;
+        /**
+          * Progress of the bar, a value from 0-100
+         */
+        "progress"?: number;
+        /**
+          * Theme of the input.
+         */
+        "theme"?: DuetTheme;
     }
     interface DuetRadio {
         /**
@@ -5352,6 +5873,243 @@ declare namespace LocalJSX {
          */
         "theme"?: DuetTheme;
     }
+    interface DuetUpload {
+        /**
+          * Indicates the id of a related component’s visually focused element.
+         */
+        "accessibleActiveDescendant"?: string;
+        /**
+          * accessible aria-Label of button
+         */
+        "accessibleButtonLabel"?: string;
+        /**
+          * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
+         */
+        "accessibleControls"?: string;
+        /**
+          * Indicates the id of a component that describes the upload component.
+         */
+        "accessibleDescribedBy"?: string;
+        /**
+          * Indicates the id of a component owned by the input.
+         */
+        "accessibleOwns"?: string;
+        /**
+          * Default actions added to the internally used duet-editable-table
+         */
+        "actions"?: DuetEditableTableActions | string;
+        /**
+          * A string of commaseperated file type values that are allowed
+          * @example : .pdf,.doc,.docx
+         */
+        "allowedExtensions"?: string;
+        /**
+          * A string of commaseperated mime type values that are allowed
+          * @example : image/*,application/msword,
+         */
+        "allowedMimetypes"?: string;
+        /**
+          * Label of button
+          * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
+         */
+        "buttonLabel"?: string;
+        /**
+          * Property to change button label defaults on the component.
+          * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment", }
+         */
+        "buttonLabelDefaults"?: DuetLangObject | string;
+        /**
+          * Caption (underneath label) that can be set as a way of adding extra information
+         */
+        "caption"?: string;
+        /**
+          * Description for the upload component.
+          * @default { fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.", sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.", en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.", }
+         */
+        "description"?: string;
+        /**
+          * Property to change descriptionDefaults defaults on the component.
+          * @default { fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.", sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.", en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.", }
+         */
+        "descriptionDefaults"?: DuetLangObject | string;
+        /**
+          * Makes the input component disabled. This prevents users from being able to interact with the upload component, and conveys its inactive state to assistive technologies.
+         */
+        "disabled"?: boolean;
+        /**
+          * Display the input in error state along with an error message.
+         */
+        "error"?: string;
+        /**
+          * If external is set to true, the upload component will not actually upload the files, but only keep states it will be up to you to handle the upload and return progress information to the upload-component
+         */
+        "external"?: boolean;
+        /**
+          * Label for the filelist's empty state.
+          * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."}
+         */
+        "fileListEmpty"?: string;
+        /**
+          * Defaults for the filelist's empty state.
+          * @default { fi: "Ei vielä lisättyjä tiedostoja.", sv: "Inga filer har lagts till ännu.", en: "No files added yet.", }
+         */
+        "fileListEmptyDefaults"?: DuetLangObject | string;
+        /**
+          * Map of string that contain list of uploaded files.
+         */
+        "files"?: StringMap;
+        /**
+          * Array of group names that you want the editable table to use to display files
+          * @required 
+          * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+         */
+        "groups"?: DuetEditableTableGroupNames | string;
+        /**
+          * If set the upload component will not display an upload button, you will have to create one yourself and call the exposed method startUpload
+         */
+        "hideButton"?: boolean;
+        /**
+          * Visually hides the groups labels in the editable table list used to display the list of files
+         */
+        "hideGroups"?: boolean;
+        /**
+          * Adds a unique identifier for the upload component.
+         */
+        "identifier"?: string;
+        /**
+          * Label for the input.
+          * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        "label"?: string;
+        /**
+          * Property to change labelDefaults defaults on the component. normally you would handle these strings on an application level and override @label when needed
+          * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        "labelDefaults"?: DuetLangObject | string;
+        /**
+          * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files, by default this is off, setting this to true will limit the users choices to what has been explicitly set
+         */
+        "limitSelection"?: boolean;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin"?: DuetMargin;
+        /**
+          * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
+         */
+        "maxBytes"?: number;
+        /**
+          * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
+         */
+        "maxBytesTotal"?: number;
+        /**
+          * Use maxFiles to specify the maximum amount of files that can be uploaded
+         */
+        "maxFiles"?: number;
+        /**
+          * Use multiple to allow the user to select multiple files when uploading
+         */
+        "multiple"?: boolean;
+        /**
+          * Name of the upload component.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onDuetBlur"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when a user clicks cancel on an upload in progress
+         */
+        "onDuetCancel"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onDuetChange"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when a user clicks delete to delete an uploaded file, or a file entry with error
+         */
+        "onDuetDelete"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when the current upload batch finishes
+         */
+        "onDuetDone"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onDuetFocus"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when the file progress is updated.
+         */
+        "onDuetProgress"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when the current validation state changes internally
+         */
+        "onDuetState"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when the user clicks the upload button
+         */
+        "onDuetUpload"?: (event: CustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+         */
+        "required"?: boolean;
+        /**
+          * If enabled the editable-table will display links on successfully uploaded items, this requires the server can respond with link URIs in the correct format and that the files are accessible to the user
+         */
+        "showLinks"?: boolean;
+        /**
+          * Property to change the aria upload progress text read aloud by screenreaders
+          * @default { fi: { inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta", inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä", done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti", doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä", files: "tiedostot", file: "tiedosto", }, sv: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades", done: "Alla {filesTotal} har lagts till", doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades", files: "filer", file: "fil", }, en: { inProgress: "Adding {filesUploaded} of {filesTotal}", inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed", done: "All {filesTotal} added successfully", doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors", files: "tiedostoa", file: "tiedosto", }, }
+         */
+        "statusLabelDefaults"?: DuetLangObject | string;
+        /**
+          * Strings used for the status aria-label
+         */
+        "statusMessageLabel"?: StatusMessage | string;
+        /**
+          * Theme of the input.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * Endpoint URI that is capable of receiving the files
+         */
+        "uri"?: string;
+        /**
+          * Property to read if the internally used editable-table contains errors or not
+         */
+        "valid"?: boolean;
+        /**
+          * Value of the input.
+         */
+        "value"?: string;
+    }
+    interface DuetUploadAriaStatus {
+        /**
+          * Adds accessible label that is read aloud
+         */
+        "accessibleAriaLive"?: "off" | "polite" | "assertive";
+        /**
+          * valid file amount
+         */
+        "inprogress"?: number;
+        /**
+          * invalid file amount
+         */
+        "invalid"?: number;
+        /**
+          * Status labels used in the component
+         */
+        "statusMessageLabel"?: StatusMessage;
+        /**
+          * total files
+         */
+        "total"?: number;
+        /**
+          * valid file amount
+         */
+        "valid"?: number;
+    }
     interface DuetVisuallyHidden {
     }
     interface IntrinsicElements {
@@ -5367,6 +6125,9 @@ declare namespace LocalJSX {
         "duet-cookie-consent": DuetCookieConsent;
         "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;
@@ -5388,6 +6149,7 @@ declare namespace LocalJSX {
         "duet-notification-drawer": DuetNotificationDrawer;
         "duet-number-input": DuetNumberInput;
         "duet-paragraph": DuetParagraph;
+        "duet-progress": DuetProgress;
         "duet-radio": DuetRadio;
         "duet-radio-group": DuetRadioGroup;
         "duet-range-slider": DuetRangeSlider;
@@ -5403,6 +6165,8 @@ declare namespace LocalJSX {
         "duet-toggle": DuetToggle;
         "duet-tooltip": DuetTooltip;
         "duet-tray": DuetTray;
+        "duet-upload": DuetUpload;
+        "duet-upload-aria-status": DuetUploadAriaStatus;
         "duet-visually-hidden": DuetVisuallyHidden;
     }
 }
@@ -5422,6 +6186,9 @@ declare module "@stencil/core" {
             "duet-cookie-consent": LocalJSX.DuetCookieConsent & JSXBase.HTMLAttributes<HTMLDuetCookieConsentElement>;
             "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>;
@@ -5443,6 +6210,7 @@ declare module "@stencil/core" {
             "duet-notification-drawer": LocalJSX.DuetNotificationDrawer & JSXBase.HTMLAttributes<HTMLDuetNotificationDrawerElement>;
             "duet-number-input": LocalJSX.DuetNumberInput & JSXBase.HTMLAttributes<HTMLDuetNumberInputElement>;
             "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>;
@@ -5458,6 +6226,8 @@ declare module "@stencil/core" {
             "duet-toggle": LocalJSX.DuetToggle & JSXBase.HTMLAttributes<HTMLDuetToggleElement>;
             "duet-tooltip": LocalJSX.DuetTooltip & JSXBase.HTMLAttributes<HTMLDuetTooltipElement>;
             "duet-tray": LocalJSX.DuetTray & JSXBase.HTMLAttributes<HTMLDuetTrayElement>;
+            "duet-upload": LocalJSX.DuetUpload & JSXBase.HTMLAttributes<HTMLDuetUploadElement>;
+            "duet-upload-aria-status": LocalJSX.DuetUploadAriaStatus & JSXBase.HTMLAttributes<HTMLDuetUploadAriaStatusElement>;
             "duet-visually-hidden": LocalJSX.DuetVisuallyHidden & JSXBase.HTMLAttributes<HTMLDuetVisuallyHiddenElement>;
         }
     }