@duetds/components 10.0.0-alpha.24 → 10.0.0-alpha.26

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

@@ -10,6 +10,7 @@ import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
 import { Teleport } from "../../utils/teleport";
+import { postfixTheme } from "../../utils/token-utils";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
@@ -169,9 +170,18 @@ export class DuetModal {
             enableBodyScroll(this.variation === "slide-up" ? this.modalContentEl : this.modalEl);
             this.duetClose.emit();
             this.teleport.removeInertFromSiblings();
-            setTimeout(() => {
-                focusElement(this.focusedElBeforeOpen);
-            }, TRANSITION_MS);
+            if (this.focusElementOnClose !== "") {
+                setTimeout(() => {
+                    let focusEl = this.focusedElBeforeOpen;
+                    if (typeof this.focusElementOnClose === "string") {
+                        focusEl = document.getElementById(this.focusElementOnClose) || focusEl;
+                    }
+                    else {
+                        focusEl = this.focusElementOnClose || focusEl;
+                    }
+                    focusElement(focusEl);
+                }, TRANSITION_MS);
+            }
             if (this.isAndroidDevice) {
                 window.removeEventListener("resize", this.handleAndroidResizeEvents);
             }
@@ -247,6 +257,12 @@ export class DuetModal {
     async hide() {
         this.open = false;
     }
+    /**
+     * Set focus on the close button of the modal.
+     */
+    async focusCloseButton() {
+        this.buttonEl.setFocus();
+    }
     /**
      * Scolls the top of the modal's content into view
      *
@@ -308,20 +324,16 @@ export class DuetModal {
      */
     render() {
         var _a, _b;
-        let iconColor = "primary";
-        let closeColor = "secondary";
-        const closingButton = (h("div", { key: '16ecdebdff260207b978a3c14686bb27f99369bc', class: "duet-modal-close" }, h("duet-button", { key: '832185b0eb84406145281ec31a310cba640f42db', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        if (this.theme === "turva") {
-            iconColor = "primary-turva";
-            closeColor = "secondary-turva";
-        }
-        return (h("div", { key: 'ff98af4d04d36b5967954bae9fad52d8a3c92af1', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "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", class: {
+        const iconColor = postfixTheme("primary", this.theme);
+        const closeColor = postfixTheme("secondary", this.theme);
+        const closingButton = (h("div", { key: '39d89598c50f59be771033542b474cc6b7e1df0b', class: "duet-modal-close" }, h("duet-button", { key: 'b5c6f0c486eaa24d4c7747a839288562e63808bf', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        return (h("div", { key: '07de0b18de78d147afa8cdaeadc39c877cd32dca', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "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", 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("duet-overlay", { key: 'f5b45235e96cfe9afc7e698f58758f3889c3fd18', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '8e01ae356b01d920b2dc99fb9012d0b36e1160c2', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '08d67fe06635ffce14ed2151c9b7211740f5366f', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '83d7365182d8a008dbceca7d19d5f110d4e3e39a', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -332,18 +344,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '4b67fe5599c29429e2e43d2fa3ec1e4bb2362f5a', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: '926f82204442851d8fa4d3b83c49fa1b3e0970f0', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '1fc3a1a23142493d5a384fcd1dfbc5e0cb471de4' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '2f216eb1c8db56490a684203edfdb93bcfd736c7', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'b1b6c5d0fab63540a89c585e09db2044a9944957' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '55e0891ac4dc8e5eaebd53740ccc2afb4759c45c', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: 'e727afc6bd9c81124f632929b840cc0beaac6537', class: "duet-modal-header" }, h("span", { key: '8a55cf9f79f46df6f7d15961f7d1300cc42fe345', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'c79cbee03e0bce0b44b4d816b5c4d02b05605a10', name: "top" })), this.icon && h("duet-icon", { key: '278d6e8d84de7394267291e0fb294c577e7be718', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'fad28910b603089cfd9f3bf4fb1e9dc4df6a4d6a', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '67d1778db551a40565263f39968e8a7f3e3d148d', class: "duet-modal-spinner" }, h("duet-spinner", { key: '71fddb78ad12e0ce90c14a725ac017431bf8864a', size: "large", color: "primary" }))), h("div", { key: 'e0a601e11fa6761658d6f74af02a509b835e6f37', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: 'a0ef6dab10ebc813443950cbb369303fd2b305a4' })))))));
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '1cab42f970d7b12c6684ac63e37324516180d168', class: "duet-modal-header" }, h("span", { key: 'a3e9c69a6eb8ebcc8e0cbb282e14438c20153f7c', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'b719c6a7ae968b6687f259d061ec414326ad9301', name: "top" })), this.icon && h("duet-icon", { key: '378d48739073800b81634af0441e5b82013df9a6', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '8052f57a3d06363e38bcf748d81e37ec8d9e7928', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'c98e91827794451431e8f875994446ee09d5bd9f', class: "duet-modal-spinner" }, h("duet-spinner", { key: '08f09524dd18e633063e5a5ac5fced5103610d7d', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: 'b237e8483fd62056b4f99507a78580983b1135a8', "aria-live": this.variation === "loader"
+                ? "assertive"
+                : this.accessibleAnnounceChanges === "body"
+                    ? "polite"
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'f9ed9945e262cbb20ff4c51d1a2e67329eae9a5e' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -800,6 +816,54 @@ export class DuetModal {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "focusElementOnClose": {
+                "type": "string",
+                "attribute": "focus-element-on-close",
+                "mutable": false,
+                "complexType": {
+                    "original": "FocusableComponent | HTMLElement | string",
+                    "resolved": "FocusableComponent | HTMLElement | string",
+                    "references": {
+                        "FocusableComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::FocusableComponent"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the\nelement as a string. Use empty string to disable focus moving on close - do this if after closing there is\nanother element that automatically gets the focus or you handle focusing manually."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleAnnounceChanges": {
+                "type": "string",
+                "attribute": "accessible-announce-changes",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"all\" | \"heading\" | \"body\"",
+                    "resolved": "\"all\" | \"body\" | \"heading\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes either the entire modal (\"all\"), headign and body content (\"heading\"), or just its body content (\"body\")\nan aria-live region, so that changes are announced by the screen readers. Do not use with loader variation,\nas it handles aria-live separately."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -913,6 +977,23 @@ export class DuetModal {
                     "tags": []
                 }
             },
+            "focusCloseButton": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set focus on the close button of the modal.",
+                    "tags": []
+                }
+            },
             "scrollToTop": {
                 "complexType": {
                     "signature": "(smooth?: boolean) => Promise<void>",

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

@@ -31,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '67b6010525da471d8f1d39cdd64cf6a9cbdecba5' }, h("div", { key: '7f7d7cb7e76887002c1bd4116e14780261458c07', class: { container: true, sticky: this.sticky } }, h("slot", { key: '2667b3a0e765609fcd3b77d621dbc59a335dfe32' }), h("slot", { key: '7fc113b96d80e1677ca7661b7504e41638686690', name: "mobile" }), h("slot", { key: 'b6c714e94df2ffe4c94b1c9e56f512b71d3bcde6', name: "desktop" }))));
+        return (h(Host, { key: 'f7a8ed09a94df6c749849af4fa57746415c1ed35' }, h("div", { key: '0698cb914b2069f402b0771c748a488e3523aa67', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'dbac0328ad41f8a9bde92011b654dc8640021b0d' }), h("slot", { key: '9b3161669471c6505d0aab172afe2c6953e09ec2', name: "mobile" }), h("slot", { key: 'd6067606d1a4544c027d36edf530ec1488c15ce9', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,11 +72,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: 'ad950e443ce4d6f4584dc9721d571a80fe8436b2', role: "listitem", class: {
+        return (h("div", { key: '38f589ecc0f7bfacef51a99bcdc34e11972a623c', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '95bebd9b5dab41ca48f1cd17dacdd314e2e7b310', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '959973ede9244668649f97b4b196c9d49ce3013d', class: "duet-notification-container" }, h("div", { key: '1fec3042cfba91fb3331b2ba854c2d96078ec452', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '44c93136aaefeb3d9e1247c9fb390097346b89e4', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: 'dc0f50e9d0dd7d1d8894d834fc8b43d911a5fcaa' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'a41b7b634dafc5ac0c9b518caedbef53a508f6ae', class: "duet-notification-content" }, h("slot", { key: 'cb2850efc2259436c894c2317342212f4a49ef4b' })), h("div", { key: 'd970b769771b3196e29882ba2d8e8587bdad68f7', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '1baa41acae73931933c8fd7cb844cc9565486168', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '86b846fbd0624d5a01f339cb65875300681610e9', class: "duet-notification-container" }, h("div", { key: '41cc6cb349bce5689c3f31b08beb985a0aff4677', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'd51af06ea2f23509bb96299c0b75e04a5e42d41d', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '6d7f78247068a68e8e2a8eb1157f2788ecb871ab' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'f0ccd721e329487b11e3ccd7dda1a9c252445d9a', class: "duet-notification-content" }, h("slot", { key: '0e583c14cdea246a712a99880b9a39f9d0a4504e' })), h("div", { key: 'ba4174a98f6f89b9cba21ab077c30c85b23675e1', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,7 +55,8 @@ export class DuetNumberInput {
             sv: "{current} euro valt",
         };
         /**
-         * Format of message used to announce current amount when switching between amounts.
+         * Format of message used to announce current amount when switching between amounts. Note that the default has "euros"
+         * so if you use another unit is is essential you set this attribute to reflect that unit.
          * The string {current} is replaced with the current amount.
          * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
          */
@@ -273,7 +274,7 @@ export class DuetNumberInput {
             // Set the localized prop value.
             this.value = this.localizeValue(value);
             // Finally also set the visible input value and unit.
-            this.duetInputElement.value = `${this.value} ${this.unit}`;
+            this.duetInputElement.value = `${this.value}${this.getUnitString()}`;
         };
         this.add = (ev) => {
             // If this was called via a html button, prevent the default functionality
@@ -371,6 +372,10 @@ export class DuetNumberInput {
             this.emitNull(ev);
         }
     }
+    // prefix existing unit with white space or return empty string if no unit
+    getUnitString() {
+        return this.unit ? ` ${this.unit}` : "";
+    }
     formatAnnouncement() {
         const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
         if (current == null) {
@@ -384,13 +389,13 @@ export class DuetNumberInput {
      */
     render() {
         const identifier = this.identifier || this.inputId;
-        const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
+        const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: '49a555df21c951b795e625c4799ecb5419fc474e', class: {
+        return (h(Host, { key: 'ff7a3b099b6146f8db869268ecc2609fefa88ca6', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '95905465685b005ca2589d1934c237473fac78a7', class: "duet-number-container" }, h("duet-input", { key: '6bac3f4ba516dd43f2681d21fcd530d35c772cb5', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '52a0896ccb3fd7c716625da4c8de5f2f09622a1c', name: "tooltip" }), h("div", { key: 'af1c978396037b1e1e5d8d0d0e8c25904d519098', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'b0bc1e76994b2c22b70a259962adac524b1ca5eb', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: 'c6c374074fe1e74907374d89cba0679bf9f5189d' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: '135624fed93bbe112fecdd3b46d95aaf5f416b64', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: 'c65086cc05992d5120765da78e2eac86183e5630', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '7f025ffd2816298087614a7d449739631d0ff9c6' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: 'f232ce3d5c1ad08b350d02b5c65bd21ec7dcf9c5', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '03a758593f10d9c55307c3622b8a68b14c720f97', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { key: '04d204f9d0dc1bf334606a101b0b4b5e165d36a3', class: "duet-number-container" }, h("duet-input", { key: '464c323e615b8978944cdeec09e0e1a1503391a0', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '876fa9e487574bd143648c8649105ac9f5972829', name: "tooltip" }), h("div", { key: '60053c4b4c4602d494693804539eff2149fe2a64', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: '083dc0860543ddc7e2532620e345ad9d8d163d13', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: '5323ecaf1f86fa97f9267b70bc048dadcca7d34f' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: 'd6ab1819fe4c96d6e379570c5a5c4eb41a1a775f', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '82b9a72bfeba3653c85f853c2e9d295d146b2152', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '697550e4c1f874401d2e17f60c6c4f324fc97bd8' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: '7947d70d3a48a3ea7e36a46aa79c6abc82d52565', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '0759711664742966c214cb765c179706affc7b2f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -665,7 +670,7 @@ export class DuetNumberInput {
                             "name": "default",
                             "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
                         }],
-                    "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
+                    "text": "Format of message used to announce current amount when switching between amounts. Note that the default has \"euros\"\nso if you use another unit is is essential you set this attribute to reflect that unit.\nThe string {current} is replaced with the current amount."
                 },
                 "getter": false,
                 "setter": false,

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -43,12 +43,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '628273f674969acc5d8a49ea87897fe30a0aa73b', class: {
+        return (h("div", { key: 'c8965538a92caf79f80e48d48064860b3fba4a1c', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: 'e92f86a1b315431caa574ff42342c9ebfe944802', class: "background" }, this.theme === "turva" && h("div", { key: '6c2b46cc3961a2c01cf55dd4ee998930e0203138', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '223d19ded0f680af3a98cc57886344e15ad3e89e', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '8879e5620c44051f5d913b72228142151aaed976', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '41eb8c4b1b270b3ec17dd00c9b3ae88305287c8c', class: "brand-shaped-icon" }, h("duet-icon", { key: '00fb325f70fb2730c261ad492e2990d481ac0cc9', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '23af280baecc0cb0b71382269236fd32d362356c', class: "heading" }, h("slot", { key: '29a66ba008d7e796ba317c115a12756bc0b00f94', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '6161bb90ecf741d67298184ed058f6857a26726c' }, h("duet-spacer", { key: 'b3bb416d59727ab64ff4b2cd601c1846ad7a64da', size: "large" }), h("div", { key: 'c771ce9dc543006f93a072f2062fbb580064764d', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: '845fe8135a9ae4814633cc083a4b87b7ef7b716f', class: "background" }, this.theme === "turva" && h("div", { key: 'c6d6d61458c267811e1b3bd2f5c53a0e69b6fd4e', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '8f17b5fbb587dd2628c8928da6019f00e4d74f53', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '125cb3cdd58e3f0f43927446c57759efd2d6473d', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'b547fb58f9df92aeb648bb37f3d28b0d3982fe41', class: "brand-shaped-icon" }, h("duet-icon", { key: 'e74873b15c8f7f2dac7e7589c107308b60bb4ff0', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'e75036eaeaa3a4665202b042acbd9a58a896f2bd', class: "heading" }, h("slot", { key: '3aa3b62846356cf5e5aa8b25dcd7cce2f6d9867f', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: 'cb1b3dcd21c496a3ba752b3ce718d054c6a317ca' }, h("duet-spacer", { key: '08ab03a19f3d5a495cdbad4f5e06f6ed36bd6819', size: "large" }), h("div", { key: 'c7c2fe589b8c599a82403408c9e3bda91d8b01ac', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,98 @@
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 8px 0 20px 0;
+}
+@media (min-width: 36em) {
+  :host {
+    margin: 12px 0 28px 0;
+  }
+}
+:host .duet-m-0 {
+  margin: 0 !important;
+}
+
+.duet-panel {
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(8, 42, 77);
+  background-color: rgb(255, 255, 255);
+  border: 0 solid rgb(212, 223, 229);
+  border-radius: 16px;
+}
+.duet-panel.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(23, 28, 58);
+  border-color: rgb(222, 224, 228);
+}
+.duet-panel.padding-small {
+  padding: 16px;
+  border-radius: 12px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-small {
+    padding: 20px;
+  }
+}
+.duet-panel.padding-medium {
+  padding: 20px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-medium {
+    padding: 28px;
+  }
+}
+.duet-panel.padding-large {
+  padding: 28px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-large {
+    padding: 36px;
+  }
+}
+.duet-panel.border {
+  border-width: 1px;
+}
+.duet-panel.secondary {
+  background-color: rgb(245, 248, 250);
+}
+.duet-panel.secondary.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+}
+.duet-panel.accent {
+  background-color: rgb(240, 247, 250);
+  border-color: rgb(198, 225, 238);
+}
+.duet-panel.accent.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+  border-color: rgb(199, 202, 207);
+}
+.duet-panel.accent.secondary {
+  background-color: rgb(217, 236, 245);
+}
+.duet-panel.accent.secondary.duet-theme-turva {
+  background-color: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva {
+  color: #172a3b;
+  border-color: #d4dde2;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.secondary {
+  background-color: #f5f6f7;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent {
+  background-color: #fdf7f2;
+  border-color: #f1cab2;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent.secondary {
+  background-color: #fbe1d1;
+}

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

@@ -0,0 +1,234 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetPanel {
+    constructor() {
+        /**
+         * Theme of the panel.
+         */
+        this.theme = "";
+        /**
+         * Controls the padding of the component. Padding is automatically responsive.
+         */
+        this.padding = "medium";
+        /**
+         * The color variation of the panel. Combination of palette ("default", "accent") and palette variation ("primary",
+         * "secondary"). You can ommit "default" and "primary" - they are the defaults.
+         */
+        this.variation = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    render() {
+        return (h(Host, { key: 'ce2c9ad02ea4b482491120c4564322a7ab1b97c8' }, h("section", { key: '058ae2c34b915888645f0a0fbce8c905f9a99330', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+                "duet-panel": true,
+                "duet-theme-turva": this.theme === "turva",
+                [this.variation.split("-")[0]]: true,
+                [this.variation.split("-")[1]]: true,
+                [`padding-${this.padding}`]: true,
+                border: this.border,
+                "duet-m-0": this.margin === "none",
+            } }, h("slot", { key: 'eabfa138724309e78227fb8e48507a2a065c5822' }))));
+    }
+    static get is() { return "duet-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the padding of the component. Padding is automatically responsive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "variation": {
+                "type": "string",
+                "attribute": "variation",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetPanelVariation",
+                    "resolved": "\"\" | \"accent\" | \"accent-primary\" | \"accent-secondary\" | \"default\" | \"default-primary\" | \"default-secondary\" | \"primary\" | \"primary-accent\" | \"primary-default\" | \"secondary\" | \"secondary-accent\" | \"secondary-default\"",
+                    "references": {
+                        "DuetPanelVariation": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-panel/duet-panel.tsx",
+                            "id": "src/components/duet-panel/duet-panel.tsx::DuetPanelVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color variation of the panel. Combination of palette (\"default\", \"accent\") and palette variation (\"primary\",\n\"secondary\"). You can ommit \"default\" and \"primary\" - they are the defaults."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "margin": {
+                "type": "string",
+                "attribute": "margin",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "border": {
+                "type": "boolean",
+                "attribute": "border",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set this attribute to draw a border around the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "attribute": "accessible-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the panel that is only shown for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "attribute": "accessible-labelled-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that labels the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "attribute": "accessible-described-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}