@duetds/components 10.0.0-alpha.6 → 10.0.0-alpha.7

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

@@ -56,6 +56,15 @@ export class DuetCollapsible {
                     return "xx-small";
             }
         };
+        this.getAccessibleLabel = () => {
+            if (this.accessibleLabel) {
+                return this.accessibleLabel;
+            }
+            if (this.heading && this.caption) {
+                return `${this.heading}. ${this.caption}`;
+            }
+            return this.heading || null;
+        };
         this.handleClick = (e) => {
             e.preventDefault();
             this.open = !this.open;
@@ -68,6 +77,7 @@ export class DuetCollapsible {
         this.negative = false;
         this.accessibleLabel = undefined;
         this.heading = "";
+        this.caption = "";
         this.headingFullWidth = false;
         this.centerHeading = false;
         this.headingWeight = "semibold";
@@ -105,14 +115,15 @@ export class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '249132a1b5e58240d37d3d995a4ef53378eff63f', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '7b9c2682402ac40049fa13406131a1d1a55eb051' }, h("button", { key: 'cb3b234ce9ee241fa3f63c81850ea418af00f045', class: {
+        return (h(Host, { key: 'b3b56b0ff3a474d0b9a1b9b5b2b95565b928f9b6', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '2ed3aceffd3951a1fbc9753090d21571ebc4a9f7' }, h("button", { key: '93e4e421bca79965a4c26138dde6de0874b40cdc', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4aebb0229f1a8436ef5413b696c8d8674d81bd7d', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'a67ec08b1f5f0ef4e3b7ece52664104d9d2df10b', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'a2a5c24dd64f3bab25c8167c11f738953e78a948', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '9d4820bb70777bfcaee8fc76f47fcba4e9ed9a91', part: "duet-collapsible-after-heading" }, h("slot", { key: 'cbe50074d804f79c746f29760d3536241e5d2717', name: "after-heading" }))))), h("div", { key: '8cd82a8d4e2aa518cd1c9ca8451ace90a4ff8ec9', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '2bf409c9b05c884ce0c1de5358c4446ed0d6dc34' }))));
+                "has-caption": !!this.caption,
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '0706dfe66685e90322fc67858eb923623ab2e23e', class: "duet-collapsible-heading-wrapper" }, h("div", { key: 'fab600633aea517fcef9f0577ea7688a8e160331', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '1ac6f6f7cce01d02b9d09659299ed3c602a4a29e', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '8820659046737c7f7b503b097a0ee7b99614d7b8', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '707fdeb97c4713df2d972bcf7f7612401d31aac0', part: "duet-collapsible-after-heading" }, h("slot", { key: 'fb1efb065f31e769c8e26c5bd608beeca76529d2', name: "after-heading" })))), this.caption && (h("div", { key: 'f70e43921a71817cda88c4fafae2f2310f37ada8', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'd8bfc9ac8d919b39d5fe8293f926ad386102136b', size: "small", margin: "none" }, this.caption))))), h("div", { key: '0500269581f8723e24e7190b3b257b3e05d682fc', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '32d7579f9d0eda1a84be85c553c3d555977d9b9c' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -213,6 +224,26 @@ export class DuetCollapsible {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The caption text to display below the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "caption",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "headingFullWidth": {
                 "type": "boolean",
                 "mutable": false,

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -45,10 +45,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: 'cc2e48ee12ea08d98bdcbffb297a6a2ed218e6b9', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '0f5aed0d311a0406993da0a933249ded67a9ad50', class: {
+        return (h(Host, { key: '39a98bc5c9e4f4524ebcef1f5bceadc19a6d07e3', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'c9fb952d66118cbdf423d24d365ade9fc58e1a58', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'e05a767fb9d0320158709bc7e04b53cf81cac23c' }, this.name && (h("duet-heading", { key: '8af67cd790130a68be2360b74416e56776e07815', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '4e52d9752abdda1c14a711af4d1f0c0b587a661b', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'd5ef84acee777453998cc1094e0f6d3175099764', class: "email" }, h("duet-icon", { key: '891e836d988732d4212878e8eeca2e3e7b1fa06b', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '7a1cc4a7bfa96f42084565ddde8ced1a5bcbdc76', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'aa53d063b0d6ea053a5f7826307d76b46a6687f6', class: "phone" }, h("duet-icon", { key: 'b7fa45571c0ea392949010a31092aed317663f6e', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '70206b481553eec0d32322c2885a7c9a525a4398', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '59e34fec5982ee552dd914d1a40897d2a7d4b04a', class: "call-to-action" }, h("duet-button", { key: '9b6982923e48f4b6ecdd123cf733d162a42ffa5b', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'ec7625ef7d5a327d1bfa192ddd950cfbb26db708' }), h("slot", { key: 'c875ed1c02e6ef4aab02000dbe3e83fda4154315' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '3d916ef543989f6c535bebf7058828ea1a92e46f' }, this.name && (h("duet-heading", { key: '34349d6e331e031b70d60277d71a2698e08e0d14', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '2492313d9e481579d1f9a03524d967dc4813dbb5', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '641aafcd47888ea410ede3aa54ea34084c2a0ea5', class: "email" }, h("duet-icon", { key: 'bbe6aabb9b6073e2ae6ea1287188a705183fd18a', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '159ecf5a5ea43c73b3606d6cd86a9bc96d3ff20b', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '87ea068fe072eb0ec5e93c87fc22ee5d1156f216', class: "phone" }, h("duet-icon", { key: 'd42e0c5a2b0b76fd4a28adbee6d2f1dae076d354', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e20b2e84426c1105c8170c0159899443ea4b0c54', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '940d0a605a472a688396e791894bb1a1796e4978', class: "call-to-action" }, h("duet-button", { key: 'b0aa2e8cc48dd5f38cabf260c0742535d778c9b2', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'e347fcd870d12eb413e5b3871303f69fff0dc3fe' }), h("slot", { key: '9dca553d670b1fc7ea7a570afc55a5bdabd7c0a7' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -40,7 +40,7 @@ export class DuetCookieConsent {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a1ecd4a76baeb20fb29f1b50713568a61720c2eb', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '6b17b8d174b8bc5aa8cc5e8b0df9ddd034a1a2b0', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'd56a7cad1fe926db95e6124f4956d638b87d8002', class: "duet-cookie-consent-content" }, h("div", { key: '7204cfdbde061697e6d8a9f81f446257eadf8c66', class: "expand" }, h("slot", { key: '4a776a6aff7404999fac0ffb8450a35f9446a259' })), h("duet-spacer", { key: 'e7f2aeaa800f7b5ae0e87343e46f59e4e46bf558', size: "large", direction: "horizontal" }), h("div", { key: '35fc1ff56232a1bcf2b56867188ec75017be905f' }, h("duet-button", { key: 'f59636a4e6a53ff79bddabe98ef61cd75b02b45e', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (h(Host, { key: '91948660b9fab6f87923b2200960a07b864dd83f', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '0bb6143d36c29e2242d3e15c6857d38cb12a6808', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '444dfba5d496df6e6da6315372331b79b8e2a9ab', class: "duet-cookie-consent-content" }, h("div", { key: 'caacc62f4d2c9d6232efd5b0741076717aed8496', class: "expand" }, h("slot", { key: 'c2978a0efb145de1d841f90238425de3ca7a499b' })), h("duet-spacer", { key: '6429ce669d4895c4dfdd1f1e5e15d4b87633bed2', size: "large", direction: "horizontal" }), h("div", { key: '85e0b040c8248bcac1f20cba69a33737212640cc' }, h("duet-button", { key: '189912399af177fd3bdd70cc061e1f3a3dd93355', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
     }
     static get is() { return "duet-cookie-consent"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -201,7 +201,7 @@
   outline: 0;
   box-shadow: 0 0 0 2px #0077b3 !important;
 }
-.duet-theme-turva .duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
+.duet-theme-turva.duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
   box-shadow: 0 0 0 2px #171c3a !important;
 }

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -398,13 +398,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '92c25a766e7e2e60a83e54ac1c7edf470a7ff1a0', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '6cdb1b0f01b6c78d02c671500f191616c0356145', class: "duet-date" }, h(DatePickerInput, { key: '69e8fad5a45210b3dcee7be49c780823598ac8e3', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error || this.internalValidityError || null, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: '1c76a02e5be4e655cd4e0b149af246b207ad15a3', class: {
+        return (h(Host, { key: 'b6eb7023664d69420af7bdcc9b9d410982375346', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '000e37d5dc46a2e8d2c5ab5a4780ea59aa6ed464', class: "duet-date" }, h(DatePickerInput, { key: 'a795ccdba4df4bddb94705bba15746eeda04ed4f', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error || this.internalValidityError || null, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: 'e83795070df263a6c4aeefb2f53caba20628bdf4', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
                 error: !!this.error,
                 active: this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: 'af91b4916f0bc2a1465682928af90a078b6b4e4c', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '4f9b654ab68252f3632729aafa335e4c4a118c58', moveFocusTo: this.focusedDayNode }), h("div", { key: '9536e14ab5a6e019da01e3556073282f7ad9c638', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: 'f7f40e25da3fdb801a3716cbb6da9bef4908b298', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '89f68b3684a65cdc13c3592a3740f868fcf1e307', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'b9329644fbc88727451284e7c22bedba319190f8', margin: "none" }, this.label), h("button", { key: 'f9caca17691f6998d54308443eac7cc094f73169', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'd92f0be1a0d6fb6f3d8c932f014c2f514c1319d2', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '0f85d5bd40d51ad656f14420160bd83ab7ab2e12' }, text.closeLabel))), h("div", { key: 'b7efee982426325152b879ac8795f75c55630ef9', class: "duet-date-dialog-header" }, h("div", { key: '624226cb18e668939b48026df20ea362007d5eb1', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '64ed0e02afe0315c73e483a212d6714fa9f8c1e6' }, h("h2", { key: '1f10a89bef9824b1ebff2c0835c0cb4fb9847e89', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'f85bdb4030a8602df2642c8ff2c8e6a6725c139c' }, h("label", { key: '608c3f38b8de7a92d6eaf74021c9dba15d5c1412', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '268d9e71e46608d0aaaa19568b225b08089e0081', class: "duet-date-dialog-select" }, h("select", { key: 'ea1b01e8f95fc44ea07b40b3593f2a22996cd33d', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'e6ae4d02638eaf53c593c98924733d72312bde26', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '18600d4d1cc074e8baca7a2e343ad92afb12f44d' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'e2d8b0f87130ff502900c86b2cc589b7df303bf8', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: 'c476ea21946afa2e3d484cbf054037435794d5e7' }, h("label", { key: 'e670550be9ec69b1e8831aa4ae6bd223eb4cdc70', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '853c7d5cd2639552d1c9be5266f4a3c7cb44cccb', class: "duet-date-dialog-select" }, h("select", { key: '5b66d6b7ace30ed705429d96434dd886b39940e7', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'c8c57b69fff46d66ec5492bbe51f6c20d5367c7c', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9faf074f79574e751b74f7a14e312b33aab586cb' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '14fe782187efaba9c6403446f87a337585386c56', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'fbdfdf54c9a1d2133764d8c7465529d65e49e77d', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'aedcc0e167b29c902b69313821c454ff08f32693', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '2d872fe81ca740dba603c1c1a214d5bc7cf23be1', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: 'a05b3cf4dd91b6256fa336c2ceddf260fbe64e32', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: 'de51c28da1e9b5d2f87dc636006ad888f2486650', moveFocusTo: this.closeButtonNode }))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: '6d725137254f48897b66ee22de8b155bdd1b5f66', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: 'ca41ba1a3f56fa250f6a70c318bfcef6f457a51b', moveFocusTo: this.focusedDayNode }), h("div", { key: 'dae95bbfd7a1225829c488f5d7190015c75edce2', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '843d37a548ac8bbfc1b22565734562a3aacb9a78', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '0122d3ec3999a339282c52e5b433a364e008697e', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'f12366ba123a38ac9ce9bab84343531cb3e2b814', margin: "none" }, this.label), h("button", { key: 'c84b369fb284cadedbee1b0fc1761c81b010af1e', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '39fa89e90167ba1af7f911be0e3ceda38aaa9641', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '9d33b6103af64e7d894992f54981931676e0151c' }, text.closeLabel))), h("div", { key: '1269835ebe9ff4b854088e6a5bf22fca79b03e16', class: "duet-date-dialog-header" }, h("div", { key: '39f46ed09f80c25530b0f8ef0fce68e6abbbbe88', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: 'e40675ed1793756467a5b0ad0f143de3ff2a1e3e' }, h("h2", { key: 'd550800a84cc85bfd7b6f6c1658f5f4ec69913ce', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '65517cf98d77215c7a98f050ab9b6bb2caca4dce' }, h("label", { key: 'b6252d9a3a0e7caad84964e4075fe3e9733e392e', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'bb09e3d3994bc9c7089723c00e743c176ee926d8', class: "duet-date-dialog-select" }, h("select", { key: '1f3480d735c452a138c63f6b5de1ca37d91eaaef', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '92172064bc12ac77ab0d718507c8e7b2ddecd71f', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9d6d5e3488e6e94b339ccba7579529b6315e1b02' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'dafedd887fe57a186da4bf344514518d88d1233e', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '7b0cc5e3adcdd83109ef3248ff6f8511bb90c34a' }, h("label", { key: '14678c1f8035838fbdee98903a9ec0f469fea8bd', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'f69a4b2569e509c3da1c06d36cd4607a779adcdc', class: "duet-date-dialog-select" }, h("select", { key: '1bb3587d15bc53e198e3ad6ba09856bf6c3c5ca5', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'e47f2ae66f07f858fb020b1e458e888f1bc4772f', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '1f8b5df03fc2df12e991094e72b16b904a9f91ef' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '375698ec68186100de9914602f75c44d4a007ed0', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '330f331da1d9a28496c3ac25b902a085ae17a102', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '9b089681d3b58dd0cdbbc5a2f4f09e5f85ba1b3f', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '25e3a263e6a550a026f54039f90b64716bf0405b', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: '8e79a5ae68e17ed6c35a91ef397c4e2d8dd4b223', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '51b5470d35cd19e8b3af9f7694a564d8ae0bec2f', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ export class DuetDivider {
      */
     render() {
         const background = getColorByName(this.color);
-        return (h("div", { key: '25f4714a082e71f77ac7a873e1f4a37a9ba44e1c', class: {
+        return (h("div", { key: '289e5834663ce24af7c8e90958fe41d29c299d98', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -152,7 +152,7 @@ export class DuetEditableTable {
      * Render Methods
      */
     render() {
-        return (h(Host, { key: 'e0065483ff2e0a3993860c8a4d070937902722aa', class: {
+        return (h(Host, { key: '170a18bded5a1eefa62aabdfe9cbec40ebb9ad51', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -162,7 +162,7 @@ export class DuetEditableTable {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-table", { key: '37756309155291fdc6d3113763314f524036daba', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '6ed48cc74d29b6c4110eb776fbd4b3afe494a309', role: this.accessibleRole }, h("caption", { key: '54ac0fe11e3828afb9fe55efe2091c051cbf606a' }, h("slot", { key: '0748c8c3a1a86c9bb2e5461bc0ae2febe813ba96', name: "tcaption" })), h("thead", { key: '70a834880f36029abaf6bd4c9b18a41445d5e42f' }, this.hasHeadSlotFirst && (h("tr", { key: 'f2ee281168541b6f200e49a8cf70e92c5a304207' }, h("td", { key: 'cf84d555a041b917cc3d16367f0def966c66575a', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '62be9b17b585a33e2ab03443c35036271077c98c', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '330b1ab67298bbaf5d1e811ddd5f55d25643a85f' }, h("td", { key: '0153682e3091a90a81d47e12f66cbb5eb9147f8c', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '53c665398c691d197be3444a2a4f78da2b433b30', name: "thead-last" }))))), h("tbody", { key: 'c4de0827a831ef580cbf2b3927957aa4e0f74e6e' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: 'b222604c1a1967cc0a214677160d02edb71f6c27' }, h("tr", { key: '3a55e26899ec472bddcecf7031cd139961c9d914' }, h("td", { key: '924929d81c5308e0dbde8379b3ad93afe27339ac', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'f475ebbe8088e6fd696500f6bf3221ebeb0fa8e1', name: "tfoot" })))))))));
+            } }, h("duet-table", { key: '2282f3b54102b8fd06bbfb8c1158e54f400a21cc', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: 'dda2ea49bff29277445de50a779df0434e35d620', role: this.accessibleRole }, h("caption", { key: 'bb4633c4947dbfe2c9b8148688d1f03c67d94188' }, h("slot", { key: '471406fee4b4173e29abf754212355814f591266', name: "tcaption" })), h("thead", { key: 'f907958d599c07d6f220bc3159e8efa0ba85feb5' }, this.hasHeadSlotFirst && (h("tr", { key: '32803f29a816f2abe67aa8b2dbfd99fdff7c9e5b' }, h("td", { key: '634ee6e9a8b53e9610a7cbd0e5a536bcaf654207', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '444de221a86d743d36598d71fc3256c0aa16d034', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: 'a2c9f9914ab42a5421daac067472db45f6d680a7' }, h("td", { key: '0edd405623af60d014f509636fad5cf2f53f86a5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '84f0e807a4ddf22910655aad0de2dcd7fd93973c', name: "thead-last" }))))), h("tbody", { key: '7b4413d38b050b69a0a71bcca7a8200d1f480d43' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: 'a7096789b2fc5615b7a9622df8de361ea486bb69' }, h("tr", { key: '52afc13a557588195883a16b10b308b6c1062232' }, h("td", { key: 'a231e63b19ed8c96aec86973242e07c07506547d', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: '152c200e205eb63fff18df14c4ded8ea67a340d5', name: "tfoot" })))))))));
     }
     static get is() { return "duet-editable-table"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -20,11 +20,11 @@ export class DuetEmptyState {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '285d5984f45086c54305c643e1974d8ff23e0207' }, h("div", { key: '169b26d231a957c843b068a66511ea60f11143a3', class: {
+        return (h(Host, { key: '1f6624730e50ba1915eab79ea13c33134dff9119' }, h("div", { key: '066811ce2abe630a698cdc92b45e461bf50779be', class: {
                 "duet-empty-state": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '2a786961ff8018a43ff5ee297fca3a8ba5c0d63d', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: 'd3e51fbeb20d942c4593f1eda4f704e92d481014' }, h("slot", { key: '06438b354c91955053ab1fd5a4f7447673909ea6' })))));
+            } }, h("duet-icon", { key: '143baa7a70df678984547409c3d8bff636a7043c', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '000ac5797e6617cec3318a31ec186c4d9f93af0d' }, h("slot", { key: '4e389d93ba161ff558782fbafe1b60a9e883f6b1' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,20 +39,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '54b468baaf4dd04309e347b3ad7886a84af47e70', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'f28b6b4150eed4c469cf682559701ba75100bccd', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'f6aef2c47f5c6b8e6d2c1bdb46d519f4ed458718', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'a54d512a17e071942ee5f0fabf5390e6f1bcac32', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '18c10c7e8d4f3e0c8600a139d54f43b09c4e45ab', id: this.labelId }, h(this.labelHeadingLevel, { key: '91038b7ead81fc4cff1f45bdd5a115171d27f0e8' }, this.label), this.caption && h("span", { key: 'a651082ad238bc8f7f16728a1144cf03c3df338e' }, this.caption)), h("div", { key: 'e463811e43f250b812d8e7efd14f4955a3f683c7', class: {
+            } }, h("legend", { key: 'afd55670461e38468717fa4d4c897d92333c3986', id: this.labelId }, h(this.labelHeadingLevel, { key: 'd66a45591d9ea38ece746276f752a1dc9f470060' }, this.label), this.caption && h("span", { key: '2e6451284012b3f76c5ddb452e8c54c8902ba222' }, this.caption)), h("div", { key: 'f4a921c9f6fad1e6bc70e5c6e50c7e17378664b7', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'b3644143964cf701cf9821abec4fb6b4f77f46ac', class: "duet-fieldset-label" }, h("span", { key: '9645038dd64c0d028d0fba2bc2d2df9157bdf5c0', "aria-hidden": "true" }, this.label), h("slot", { key: '9bda9a72a19a343ae0b62bfd3e9962f5adb29c2c', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5939d10ccde6c9b1beded70128458a1e7d831b4d', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '9a7631156e00e7bd460fe08e74aec8e68920dc4a', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'df21df9932f6ad85e4682a9216ac816da5369a95' }), h("span", { key: '56f7b06185c295981802aa98bfb06121c6286fea', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '779d4c05e3cf5d5240af36d2338b1a757f1e947e' }, this.error)))));
+            } }, h("div", { key: '9fb2004e0c5810ba28adbf0b2f1cf222c255f7e3', class: "duet-fieldset-label" }, h("span", { key: 'd043219b465141ce2a6d6dbba38f6233560a6e3e', "aria-hidden": "true" }, this.label), h("slot", { key: 'ae5535898568b419d0534a1105878d2ddb784ff8', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '6c68d9a518f408a460e2346cdc30342606cb133d', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '198623e298175cfa825ccbc9b70ba3a25f577d2a', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'a80181d8476bb6387cb5d76cce99d4617cac8734' }), h("span", { key: 'be4bff117193cceb7517dbef02403f231ed3f263', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '08312b9df002b520950d3119195c811cb2504e83' }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -38,7 +38,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '40bce050cb2886e0a2b1f72e39337986349e4c8b' }, h("duet-visually-hidden", { key: 'c1008bf8a919503c51763361f1174a9d6a50aba6', "aria-hidden": "true" }, h("input", { key: '46d659a947506e98051e952e2b0c2894d8b93f2a', ref: input => {
+        return (h(Host, { key: 'fa488300deb51d9bc5eb5bbe2ad484047f82eaee' }, h("duet-visually-hidden", { key: 'b6eaeee61a64ae8c9e872c909f73e1cb3d8b4ac4', "aria-hidden": "true" }, h("input", { key: 'f5107c8dd70020263f0d4f06b4c5b1ff1d4c9936', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

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

@@ -116,15 +116,15 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '7df55c7d655b77f110d55b85ec86e7884f5c8d7e', class: {
+        return (h("footer", { key: 'c09536e13ed896c7c3eb2ce3d3b48529049a3fa8', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '2b32d2272dc4dc40168f3e81918a1e1efad970de', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '950af53de6fdcb8affc352bc1d4a7fe129b385d3', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '4c6a795fb654c90c687e15b81071b76b9697548b', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'ddd298007bd561bd321c9c542450c74c2998da89', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '5fb042ef3a17ff164961e7b73fb765d3911c6d01', class: "footer-top-logo" }, h("duet-logo", { key: '81426531a428181b61571ddc2c008e2fee0b7b31', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'efb8ad879b986cf8a0d8921ac83f746c8514d3c3', class: "footer-top-right-container" }, h("slot", { key: '8cfd7e50461e06f6c2138114c599c0222d40a8f8', name: "info" }), h("div", { key: 'ee51536afc0cfc9a8f29f6daad2efaf959f67c07', class: "footer-top-items" }, this.processedItems &&
+            }, part: "top" }, h("div", { key: '27e2f926b9e8922978d22782c86a5e99b38c1486', class: "footer-top-logo" }, h("duet-logo", { key: 'a297517a74d2d7b29d2e983829cd045cddca5682', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '3ffc24afa25aaa0c1987b9fd6ad08a352a43d6ff', class: "footer-top-right-container" }, h("slot", { key: '98c0a86faf2101a5ae372e12375a76b9b812d4db', name: "info" }), h("div", { key: 'f1edd105fbf081e3d85a7db3df9830520d6814f7', class: "footer-top-items" }, this.processedItems &&
             this.processedItems.map((item, index) => {
                 var _a, _b, _c, _d, _e, _f;
                 return (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith("tel:"))
@@ -134,7 +134,7 @@ export class DuetFooter {
                             : "navigation-arrow-right", "icon-right": !((_c = item.href) === null || _c === void 0 ? void 0 : _c.startsWith("tel:")) && !((_d = item.href) === null || _d === void 0 ? void 0 : _d.startsWith("mailto:")), "icon-size": ((_e = item.href) === null || _e === void 0 ? void 0 : _e.startsWith("tel:")) || ((_f = item.href) === null || _f === void 0 ? void 0 : _f.startsWith("mailto:"))
                         ? "medium"
                         : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)));
-            }))))), h("slot", { key: 'b745d299193ac3c349416cdc00e0e8fe8b00cc0b', name: "extra" }), h("p", { key: '251e9182681b71b0d07e41d7df3f7469bf1b7e53', class: "duet-footer-menu", part: "menu" }, h("span", { key: '857bb6f4883ae0656d30b2c47fb955ea64fdf064', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '913d0e1e22975d0a46bdd5f33cf05707c475b8e3', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '99fcb2936895ef6216e4b4e46cdf0910f7128505' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '3f2de8ce8cb237e92b75d7569811f5ac022d7dc5', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '3108d57df772399e2ec83e3819a277cf877f5898', name: "extra" }), h("p", { key: 'ea96247cc266efc7e209acc8281b7a207b6d8ab1', class: "duet-footer-menu", part: "menu" }, h("span", { key: '6f10b09142cf13f2168c4d1a37f6784167fff1f7', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'def1a300fe8794d3ac068b575a0e74343ddcf53d', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '88c8f59560a9d329cebcd88a6bae635a63e95681' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '121abcf17a5b8eb8f04e3c8ee2ffef57d725c8aa', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -119,7 +119,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b719a6d43845829fbda8dbc93e67aecf0894ce57', class: {
+        return (h(Host, { key: '61087a3ab642d3184a0cb007b0903780e021d05b', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -146,7 +146,7 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: '9ff8a76a35e45a15ef04f376f5b4387609e0ae7d' })));
+            } }, h("slot", { key: '47742bf4547f236c38667b70243eba88739ea81d' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-grid-item/duet-grid-item.js

@@ -26,7 +26,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cc7ed307e094fa01452cf707961c183c0622b6e7', style: {
+        return (h(Host, { key: '10b2af6baec36dcf39e1ea5af5efdef0e279f38f', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -43,7 +43,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: 'c6d01898a86329bdc57abd35a6a6e71bf80fe2c3' })));
+            } }, h("slot", { key: 'd5f3dfa412c5a3bdd7f9082d07f8ae2ca85a2b44' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,6 +35,7 @@
   line-height: 1.25;
   color: rgb(8, 42, 77);
   text-decoration: none;
+  text-wrap: balance;
   letter-spacing: -0.01rem;
   word-break: break-word;
 }

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

@@ -33,7 +33,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: '639aa76baa836dd1154030602e491d5592976e29', class: {
+        return (h(TagName, { key: 'adbe366a86226640d4f10adf49a086ca946a4c00', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -44,7 +44,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, style: { color }, part: "duet-heading" }, h("slot", { key: '99875cdb1ebbbee0ac5a3b7821dcb8504f2f8bb9' })));
+            }, style: { color }, part: "duet-heading" }, h("slot", { key: '387caeef0be5837581a9e16d8f2d36eb942d3f27' })));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,7 +158,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'cd832b5e8188e532f0ecb10d28ece8c2f70620cb', role: "region", class: {
+        return (h("div", { key: '9317af6b554aff400e94924a85274578a2557f61', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -176,17 +176,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'a0c0e2a882ce53fc12df229b82f252b93255f01f', class: "background-area" }, h("div", { key: 'cbf3c4d1706429955cd8a96fa1abe704291bf06e', class: "background-container" }, h("div", { key: '71e820f0db414855ce2b04a5ccb9786a7a537bb9', class: "background" }, h("img", { key: 'd4fbd658939268638ca18fe7281ecdea112b2822', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '0cf25b23521910a66642f8209226664a4b0e9822', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '208c56a58ae8d77b3544530d9624a1cb954cf655', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '946e5c4c89f3db22c5b476cc140579df3eddbd94', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '66c7f02ad559c5ac59b073fead93d58fea9e5fe9', class: { background: true, [this.layout]: true } }, h("div", { key: '7e4091890f931854afed8128e6de0e93030f715c', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'adfb7615caee3393c994da443ea9cee8632c5641', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '96c34abde476c7148702505199ec8264136f5b0e', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '229f4a4795ba3417527975deb1e76c6cb3c1ab41', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '3f2ae353726fc0027be26b9a5b3da24693bd6355', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'dfba6947ca623bcc1f3adb1d39f78c9c1fdff562', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'fbd2783758a9fad396d0dd6ccfbe2e7d395c4c62', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'c9d8e628a6373ecaefc574493e1f646e5fe57af5', class: "background-area" }, h("div", { key: '13f4968245418640136214af84e6e6d3b2b69960', class: "background" }, h("div", { key: '174100e1cdae385a217f21d665dbeae19d65842b', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'e7f53e49cde5f440a103ed6fc7213fb4e116f525', class: "brand-shape" }), h("div", { key: '02e2685bcca6c6d575dfcf87341f15a77650a7d2', class: "brand-shaped-image" }, h("div", { key: '8869ad1d98fcec90ecd9e04d2f57d99755f3ce86', class: "brand-shaped-image-wrapper" }, h("div", { key: 'ff6788133937b451221e626f037477ae3b741a63', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'b73fd95091cdc38b2e0a0a639890795fd553a499', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '753ef04538804cd1dbfe40b6f28a8f2046572a9f', class: "duet-hero-image-mask" }, h("div", { key: 'b7b22993441b9f1d835962bf4a8f7858c3e95fea', class: "duet-hero-image-wrapper" }, h("div", { key: '5c1d3d40b10459331c8a5dfa2976423348bea6b7', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '064a08fc1f8d3a39569dd51d6367a8d6ec57f4b7', class: "duet-hero-back" }, h("duet-button", { key: 'a2a72e4fb80142e5b5cd89d465f1666d7b87222b', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '8a7f16e42528d3f102b37ef4c6fd5d07b2c83b4c', class: "background-area" }, h("div", { key: 'd1bd227d800f0b6d13132e22c04fa4fcc5f5884f', class: "background-container" }, h("div", { key: 'edcf5211a0f78066a3bb20ed76a7c8c268f74032', class: "background" }, h("img", { key: 'b37a6029d1eb14065fedd721bc5cc9ea79e62e29', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '87315ae16f4aac41a8dc306e8a7dc1e6e451eefa', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '280069c149060c4276fad2af8a5155a76301d8c1', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '8578f05ed6a1510d5b5db627c99037e31e403104', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '58d63a2a2148f2af164e5744dc1096b5b26a7269', class: { background: true, [this.layout]: true } }, h("div", { key: '80a4935ed2027affcfbde3555f10aea44c872355', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'd4da7b7e5bc2a773b42beec24a023e35b2d90861', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '6b0b645f0b40c965d048bd5cf460df26548c6335', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'cd17bafddc2c380c4ee4d5a1d34501495bb7e63c', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'e19d97582c2fbf1413544dd50512b28088cea6c6', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '2f57d2fb8c42716d62a836c23113f3b3d0a103f5', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'e6ab45b59f5119dc8e256ddeec5c8a52228ad5a2', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '4f426ddcda2ff72f70e7e9a8c2c36876f8697054', class: "background-area" }, h("div", { key: '045515f210fb3301f83779319fd59bb819c8bc6f', class: "background" }, h("div", { key: 'da7ab6aa0276ce05e3397fa09d6f9a86237f6e98', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'da2a2a66d213946f3c214a6e268c6db5e28180f3', class: "brand-shape" }), h("div", { key: '490a965865cd3ad34843ecbc209118fbb93ae6fc', class: "brand-shaped-image" }, h("div", { key: '30f0436921fd2b3748881134549ec054b58a1f4d', class: "brand-shaped-image-wrapper" }, h("div", { key: '15a47788256b28814a21c05a4d52a13e43e87d00', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '51c084671f6673506b670ae53a5445a7b2deea38', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'c5b4f38228a1a3b2dd943ac52216bb8568e308d9', class: "duet-hero-image-mask" }, h("div", { key: '3a9b764eb6ffb0f803d4642dfa9ee0e0fad9e488', class: "duet-hero-image-wrapper" }, h("div", { key: 'b96dd4b896cca3fea04c453dec2a382a20f61637', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '4c63cc49cc014a447176dc789e16637ae440c74f', class: "duet-hero-back" }, h("duet-button", { key: 'b48dd641d53288bbe1f016296b4c22e7be8a4805', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'aed0e3448d26be3fef13e54e4b2fa56de2cba5ad', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'f628fbc033ea3260b0ea60ca86dead17c3f23fec', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'fbdce7136af5984d7515c5e4775e6c113bc90784', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'f797401a3dd28b2359ece9d162edb80a3235c7c4', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'f9c2a9cfdd540ea2ccb8850ddbd6d23ae9777bfe', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'c0ca02639838464301ebc356e61c36e2e3dde253', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'bf4f44822249e6ccb2754c714d090dd8a7f71ef0', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '2014cb831d827c2564c6ae5ad1a7b9dda4b076ac', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'a445e0970b8f7f1558d9b5f262c5442d1891a69e', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: 'c09844b83722bd18401715d0abf0481155c1e298', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '480afbbcede21c5920cd06de678a2d9126f25150' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'b21813206501ea887a74fd8c01fd04c5236e909a', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '735ddee376a35065e1bb9ca8530a1c372a20f905', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'ca1731a19cb5a4ac1d17943345a1affb0152256a', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'ba949b71c511676296be9383ae234c6abd6a86c2', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '553bb258d5e205a1283bc39bc53cd336fb3519d8', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '32058dee96286892ae8eefae4a328a7aeea1323b', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '0b1c4c0578a904559da018a5857e8f417d468ca0', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '6c6e069d4fd86dedb4af90d806a69cb6e87b116d', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'efb4742f9bc597dbf5f42db9e3b82e61544e2031', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '2f4be86967bec69f54bba697f35ebb9dbd7909dd', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '1d50ffb6aaf2c7d55f842ff25b75be397212ed58', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '3e6319dcb6ca36841431ca04853018e443deb32d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '74d002e92ca236ad9243aa5dac125a928dbc3d7b', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: 'c3426d3f22c5897a4e6e22c14008146d8e871e6b', class: "duet-hero-image", style: styles }), h("slot", { key: '5d9278bd5f22bba93e4e16d3261d1772eb844c07', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: 'f40babfcd77edae3e43a8460abd259fdd4c2d77f', class: "duet-hero-image", style: styles }), h("slot", { key: '4d2b296e53af9bca933e171839ac9d871a08d2df', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,11 +97,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '629f57b6ddd5d6ae803d93be4da1f502ebc9f7a7', class: {
+        return (h(Host, { key: 'ba913d023fc90de87a4aeedd212ab947e32c98bc', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '8c2fd3cc25c602dbdf95494dc938fb8a0e087b3e', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: 'ff5089fa99e7ca86ffa923013622115e774f2df8', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -110,7 +110,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: 'b0cf55b4aef036582b857703048eb946400388bb', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '1c8eea6c12ca3cc85caa5e6cdba5924737bc80ed', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -433,7 +433,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '6c1d94f9d544b1fdec23f6993ea8856acb3ec25e', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '1c71f810fadfda464bf37499ef37dd373f610534', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '1aeff156d8453ad8315d3e42af92f095ca7f6328', class: {
+        return (h(Host, { key: '30f2d51ce9cf22d995c492aa76cddf1763a06ba4', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '500ec6c47a364ea47eb8d5a4878ccca8279d005c', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '7a4605252b120f12f95b974bd36e9eb7a8d5659d', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -447,7 +447,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: 'a2a51d7bc74afa312058cabb51f94da42f54fc46', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '7859061ce09bb88f1bee4b275a23b05c968b06fd', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '90608b6e873b5ccbda49563f4a04eef3e96ab48d', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'c77595ab15425b05c43c1bd4787f6088ef2e7499', name: "tooltip" })), this.caption && (h("duet-caption", { key: '07107c13f7f6269abdf11207be8ba7ce093c735b', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '711e8416c4f16e82aa3efcecf68f9d7fa1cbb384', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '4a0c67e4968b454c6cc339ae816d8c3eb2142861', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '5c6bc95cfc7149aba9245c5f58e558a6831081d8', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: '3a70569af48c892b197d5dae77254074120bc185', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: '0db61c868f468f44b3e0a7776e549ee6df70de74', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '97a6188e387a1f49e302d465f00d4ed7c81784d1', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '4ec20c176c94e329898a0f248fb4b69f3ba79033', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '4d38724943676cd57a9804b773b13d0d6b9d32b5', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c92ea06068811cd93aa2fa00ae0eb362456c3637', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'a7542580d3550ed8f9161b5318187af455f0b2e9', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'e3614b13a63f079bfdddaf2c7ee21a256793f6ec', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '7adb551b1fc88b2d26f324f3891e72587285dbe5', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: '402e4a5f8ba98a98cde01517f5de6d1da030ea99', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -455,16 +455,16 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '0377efc4c565c66f5c14cb741f8ccb3e2545221a', class: "duet-input-icon" }, h("duet-icon", { key: '862ec3d70162837ad3c72e1c648176c1dc771d36', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '4bbb87e3df3d533e086c2e5b0614e7a5fd1498df', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '798619aa635e7789dd4419652dcd89704c39114f', class: "duet-input-icon" }, h("duet-icon", { key: '4a5df88168231feca08b81a2fd2635fd320112a9', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'bb4670b4ad2d2817c806250ff3d2c7b42e58ceb5', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
-            } }, h("button", { key: '08ead94af1665bdbd5f5ef366b29bba89d7df0c6', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f7a0d73ec05dfd4f0b1bdbd097f6637b18f6c62f', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '555da51b2ccc71bfdc259ee3b80ef0cb550a2757', class: "duet-input-icon" }, h("duet-icon", { key: '4e61179d3006a21c36518b34a198f1ebbcd4ba65', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '1fa648c46fd4dd1929185f0a0216e91724dd234f', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'ba539f81b4de281f1f548f858144120a308b7f27', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: '59c76b456cba12de6154d25e3a2a3262bda01061', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f5cc20be9e09fef88c8513197efc8069a344f259', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '175b9fd1bb2442763e39cb1cb97e159d5901ceca', class: "duet-input-icon" }, h("duet-icon", { key: '50a769358470f6e22060a0c61a771389f3c8b0cb', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'a07c5ccb6051d103db9c8c57473e8daefe4b9767', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '5b042e2c7aed368dc38beb4e4d4be8c770aba69c', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'f2b57b97cb3de186e3e7cc8fcff5bff2aa0c50f7' }, h("span", { key: '44280ae6250bd248ef4bc32ee3fda8adafb0b922', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'b4d5037e04f713694e18a084323f2a1cbda34b48' }, h("span", { key: '8ca0267032a66e0b196d1cf33e4ad10c51921789', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '37f27ffb2c201fef8f4058dabf29734c1fb596c6' })), h("span", { key: '87b22ac00aca098cc5e076850ca390e29cc022c9', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '961a7bdca67b47c2d4f694095fb9fe6edde487f7', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '67d7a13c0288e43bf19523ae9378cbaf83070b60' })), h("span", { key: '185873830140ac2c758297f42532c8afa12f1ac5', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '65dc92ec1a22c205ba1ba2cf56e1c32df4324e30', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,24 +43,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c4699088f31020eb2b8ed7d4ecef65514bc3d28d', class: {
+        return (h(Host, { key: '7218422a05742981b63dc1e8b29f181d753f4866', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '075e7f223d3dda19f6f5ac9f29494eda8ffc7ff9', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'f3127c1c4f7fefdce569c2c30c77d990a1b9e11d', class: {
+            } }, h("div", { key: 'cf7447fd76b23d18b34fb6ee903b2763fcf250e4', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'acb4ce1658b34788d6185b8357d8f28f2631a5bc', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '4954d9c1c200c323bf2b4906e862ede88190c025', class: "duet-layout-top-wrapper" }, h("slot", { key: 'e176f01c9d6662ee1bcfb0b9c6a0bc73b258abd6', name: "top" })))), h("div", { key: '85c1e1219c0745d92be32716169f2097a1051ac8', class: {
+            } }, h("div", { key: '726d75940090578a42eb72a0916f1fd5e2fabc31', class: "duet-layout-top-wrapper" }, h("slot", { key: '1b07000c7910ef711a9bbcb264efa2ea56678278', name: "top" })))), h("div", { key: 'b0befaba96f73bc0e57cecabb62029b6662ef41e', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: '7c70810abab73c6419db8ee5c1271ba34e877892', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'd60f45fe444f1de3089fb2207d169cc0bbfb1d5c', name: "page-heading" }), h("slot", { key: 'cf79d7bd693259864500a1b9285b3bbc84c42326', name: "main" })), this.hasSidebar && (h("aside", { key: '8c2c2c6e31a690aa01f72a03f2f62c0929902e09', class: "duet-sidebar" }, h("div", { key: '3b846f204a5b322134649c2b822d3c7bdb03447b', class: {
+            } }, h("main", { key: 'c1484df68a8e58a5bb941f8024854476c07c35e5', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'e01015df6e7aaa17ce4d357d0c61483136f0da67', name: "page-heading" }), h("slot", { key: 'e9f75c0feba0cb007c15f1df99d50aa20a08a760', name: "main" })), this.hasSidebar && (h("aside", { key: '275de6ce686959cb5a9a330710b4f14459a57eb6', class: "duet-sidebar" }, h("div", { key: '6b282d8fee11ef6e150d2b79525cbfdb15413e8c', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: 'ea597d8559fa042256c715339923f3fc885d8e50', name: "sidebar" }))))))));
+            } }, h("slot", { key: '05f1c2bd333da745c79c863e75c1ebbbd2745995', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,10 +106,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: 'abc49b84dd9a522c921d5447f1b2ec451a456f44', class: {
+        return (h(Host, { key: '8fc712b819ec0f95da99033d8f5e70ff50d2a33d', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '24ecdb7c1b3bbb33f2cf612170574b06931574fc', href: this.url, class: {
+            } }, h(Tag, { key: 'fc3d7a5b8c2bd18d44be23a475da66b5f4a886e1', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,