@duetds/components 8.4.9 → 8.5.0

package/lib/collection/components/duet-hero/duet-hero.js

@@ -364,7 +364,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroIconSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroIconSize"
                         }
                     }
@@ -586,7 +586,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroButtonData": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroButtonData"
                         }
                     }
@@ -697,7 +697,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroVariation"
                         }
                     }
@@ -807,7 +807,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroClickEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroClickEvent"
                         }
                     }
@@ -828,7 +828,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroAnalyticsEvent"
                         }
                     }

package/lib/collection/components/duet-input/duet-input.js

@@ -742,7 +742,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
                         }
                     }
@@ -766,7 +766,7 @@ export class DuetInput {
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
                         }
                     }
@@ -987,7 +987,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
                         }
                     }
@@ -1163,7 +1163,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1184,7 +1184,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1205,7 +1205,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1226,7 +1226,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1247,7 +1247,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }

package/lib/collection/components/duet-label/duet-label.js

@@ -101,7 +101,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
                         }
                     }
@@ -125,7 +125,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
                         }
                     }

package/lib/collection/components/duet-layout/duet-layout.js

@@ -124,7 +124,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
                             "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
                         }
                     }

package/lib/collection/components/duet-link/duet-link.css

@@ -42,7 +42,7 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-style: normal;
   font-weight: 400;
-  color: rgb(0, 119, 179);
+  color: rgb(0, 98, 154);
   text-decoration: underline;
   border-radius: 4px;
   transition: 300ms ease;
@@ -56,7 +56,7 @@
 }
 .duet-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(198, 12, 48);
+  color: rgb(173, 11, 43);
 }
 .duet-link:hover {
   color: rgb(0, 77, 128);

package/lib/collection/components/duet-list/duet-list.js

@@ -169,7 +169,7 @@ export class DuetList {
                     "references": {
                         "DuetListMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListMobileAlignment"
                         }
                     }
@@ -217,7 +217,7 @@ export class DuetList {
                     "references": {
                         "DuetListVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListVariation"
                         }
                     }
@@ -241,7 +241,7 @@ export class DuetList {
                     "references": {
                         "DuetListLabelWidth": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListLabelWidth"
                         }
                     }

package/lib/collection/components/duet-logo/duet-logo.js

@@ -176,7 +176,7 @@ export class DuetLogo {
                     "references": {
                         "DuetLogoSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-logo/duet-logo.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx",
                             "id": "src/components/duet-logo/duet-logo.tsx::DuetLogoSize"
                         }
                     }

package/lib/collection/components/duet-menu-bar/duet-menu-bar.js

@@ -251,7 +251,7 @@ export class DuetMenuBar {
                     "references": {
                         "DuetMenuBarChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
                             "id": "src/components/duet-menu-bar/duet-menu-bar.tsx::DuetMenuBarChangeEvent"
                         }
                     }

package/lib/collection/components/duet-modal/duet-modal.css

@@ -139,6 +139,31 @@
   top: 0;
   transition: top 600ms ease;
 }
+.duet-modal.loader {
+  text-align: center;
+  background: transparent;
+}
+.duet-modal.loader .duet-modal-close {
+  display: none;
+}
+.duet-modal.loader .duet-modal-spinner {
+  position: relative;
+  height: 120px;
+}
+.duet-modal.loader duet-paragraph.duet-loader-message {
+  max-height: 0;
+  opacity: 0;
+  transition: all 300ms ease;
+  transform: scale(0.9);
+}
+.duet-modal.loader duet-paragraph.duet-loader-message.show {
+  max-height: 100px;
+  opacity: 1;
+  transform: scale(1);
+}
+.duet-modal.loader duet-paragraph.duet-loader-message:first-of-type::part(duet-paragraph) {
+  font-weight: 600;
+}
 .duet-disable-transitions .duet-modal {
   transition: none;
 }

package/lib/collection/components/duet-modal/duet-modal.js

@@ -1,9 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { h } from "@stencil/core";
+import { Build, h } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { inheritGlobalTheme } from "../../common";
+import { DuetStringsPleaseWaitDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
@@ -29,6 +30,12 @@ export class DuetModal {
         this.hasStickyHeader = false;
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
+        this.accessibleLoaderAnnouncementDefaults = DuetStringsPleaseWaitDefaults;
+        this.accessibleCloseLabelDefaults = {
+            fi: "Sulje ikkuna",
+            sv: "Stäng fönstret",
+            en: "Close the dialog",
+        };
         this.handleAndroidResizeEvents = () => {
             if (document.activeElement.tagName == "INPUT") {
                 window.setTimeout(function () {
@@ -45,12 +52,8 @@ export class DuetModal {
         };
         this.open = false;
         this.language = getLanguage();
-        this.accessibleCloseLabelDefaults = {
-            fi: "Sulje ikkuna",
-            sv: "Stäng fönstret",
-            en: "Close the dialog",
-        };
         this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        this.accessibleLoaderAnnouncement = getLocaleString(this.accessibleLoaderAnnouncementDefaults, this.language);
         this.size = "medium";
         this.accessibleDescribedBy = undefined;
         this.accessibleLabelledBy = undefined;
@@ -76,8 +79,14 @@ export class DuetModal {
             this.focusedElBeforeOpen = document.activeElement;
             disableBodyScroll(this.modalEl, { reserveScrollBarGap: true });
             this.teleport.go(true);
+            this.slotContainerEl.querySelectorAll(".duet-loader-message").forEach(el => el.remove());
             setTimeout(() => {
-                this.buttonEl.setFocus();
+                if (this.variation === "loader") {
+                    this.addMessage(this.accessibleLoaderAnnouncement, false);
+                }
+                else {
+                    this.buttonEl.setFocus();
+                }
             }, TRANSITION_MS);
             setTimeout(() => {
                 this.modalEl.classList.add("duet-disable-transitions");
@@ -113,6 +122,9 @@ export class DuetModal {
         inheritGlobalTheme(this);
     }
     componentDidLoad() {
+        if (Build.isServer) {
+            return;
+        }
         this.teleport = new Teleport(this.element);
         if (this.active) {
             // This specific line below can’t be moved to componentWillLoad()
@@ -122,7 +134,10 @@ export class DuetModal {
         }
     }
     connectedCallback() {
-        connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
+        connectLanguageChangeObserver(this, [
+            { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
+            { prop: "accessibleLoaderAnnouncement", defaults: "accessibleLoaderAnnouncementDefaults" },
+        ]);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
@@ -154,6 +169,27 @@ export class DuetModal {
     async hide() {
         this.open = false;
     }
+    /**
+     * Adds a message to the modal dialog using animation and annoucing it to screen readers.
+     * Primarily for use with the loader variation.
+     *
+     * @param message - The message to be added to the modal dialog.
+     * @param visible - set to false if you want to add a non-visual message.
+     */
+    async addMessage(message, visible = true) {
+        const el = document.createElement(visible ? "duet-paragraph" : "duet-visually-hidden");
+        el.textContent = message;
+        el.classList.add("duet-loader-message");
+        if (this.variation === "loader" && visible) {
+            el.setAttribute("color", "gray-lightest");
+        }
+        if (visible) {
+            setTimeout(() => {
+                el.classList.add("show");
+            }, 10);
+        }
+        this.slotContainerEl.appendChild(el);
+    }
     /**
      * Local methods.
      */
@@ -182,13 +218,13 @@ export class DuetModal {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+        return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("duet-overlay", { "z-index": "-1", visible: this.open }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("duet-overlay", { "z-index": "-1", visible: this.open, dark: this.variation === "loader" }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -210,7 +246,7 @@ export class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), this.variation === "loader" && (h("div", { class: "duet-modal-spinner" }, h("duet-spinner", { size: "large", color: "gray-lightest" }))), h("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId, ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -256,19 +292,13 @@ export class DuetModal {
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
-            "accessibleCloseLabelDefaults": {
+            "accessibleCloseLabel": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "DuetLangObject | string",
-                    "resolved": "DuetLangObject | string",
-                    "references": {
-                        "DuetLangObject": {
-                            "location": "import",
-                            "path": "../../utils/language-utils",
-                            "id": "src/utils/language-utils.ts::DuetLangObject"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -277,13 +307,13 @@ export class DuetModal {
                             "name": "default",
                             "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
                         }],
-                    "text": "Defaults for accessibleCloseLabel"
+                    "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!\nSwedish translation for this property is \u201CSt\u00E4ng f\u00F6nstret\u201D."
                 },
-                "attribute": "accessible-close-label-default",
+                "attribute": "accessible-close-label",
                 "reflect": false,
-                "defaultValue": "{\n    fi: \"Sulje ikkuna\",\n    sv: \"St\u00E4ng f\u00F6nstret\",\n    en: \"Close the dialog\",\n  }"
+                "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
             },
-            "accessibleCloseLabel": {
+            "accessibleLoaderAnnouncement": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -296,13 +326,13 @@ export class DuetModal {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
+                            "text": "{fi: \"Odota, ole hyv\u00E4.\", sv: \"V\u00E4nligen v\u00E4nta.\", en: \"Please wait.\", }"
                         }],
-                    "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!\nSwedish translation for this property is \u201CSt\u00E4ng f\u00F6nstret\u201D."
+                    "text": "When modal used as a lodader, as an audible substitute for the spinner, we use this message"
                 },
-                "attribute": "accessible-close-label",
+                "attribute": "accessible-loader-announcement",
                 "reflect": false,
-                "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
+                "defaultValue": "getLocaleString(\n    this.accessibleLoaderAnnouncementDefaults,\n    this.language\n  )"
             },
             "size": {
                 "type": "string",
@@ -313,7 +343,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -420,11 +450,11 @@ export class DuetModal {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetModalVariation",
-                    "resolved": "\"default\" | \"slide-up\"",
+                    "resolved": "\"default\" | \"loader\" | \"slide-up\"",
                     "references": {
                         "DuetModalVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalVariation"
                         }
                     }
@@ -433,7 +463,7 @@ export class DuetModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation of the modal window."
+                    "text": "Variation of the modal window. Slide-up variation has fixed height so it suits well for\nsituations where the modal content height changes. Loader variation is used when the user\ninitiates an action that takes time to complete - it can be used with addMessage() method to\ninsert accessible message to the modal to inform the user about the progress."
                 },
                 "attribute": "variation",
                 "reflect": false,
@@ -448,7 +478,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -690,7 +720,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalCloseEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
                         }
                     }
@@ -732,6 +762,37 @@ export class DuetModal {
                     "text": "Hides the modal dialog and puts focus back to the original element\nthat triggered the modal (if we\u2019re still in the same view).",
                     "tags": []
                 }
+            },
+            "addMessage": {
+                "complexType": {
+                    "signature": "(message: string, visible?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": "- The message to be added to the modal dialog."
+                        }, {
+                            "name": "visible",
+                            "type": "boolean",
+                            "docs": "- set to false if you want to add a non-visual message."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Adds a message to the modal dialog using animation and annoucing it to screen readers.\nPrimarily for use with the loader variation.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "message - The message to be added to the modal dialog."
+                        }, {
+                            "name": "param",
+                            "text": "visible - set to false if you want to add a non-visual message."
+                        }]
+                }
             }
         };
     }

package/lib/collection/components/duet-multiselect/duet-multiselect.js

@@ -318,7 +318,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         }
                     }
@@ -453,7 +453,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         }
                     }
@@ -629,7 +629,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -650,7 +650,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -671,7 +671,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -285,7 +285,7 @@ export class DuetNotificationDrawer {
                     "references": {
                         "DuetNotificationDrawerDirection": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
                             "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
                         }
                     }

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -1032,7 +1032,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1053,7 +1053,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1074,7 +1074,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1095,7 +1095,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }