@duetds/components 8.7.3 → 8.7.5

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js

@@ -42,14 +42,14 @@ export class DuetBreadcrumb {
      */
     render() {
         var _a;
-        return (h(Host, { key: 'b6f3e1e75bd42d8d41e89e0f0ddc460735d0d5f7', role: "listitem" }, h("div", { key: 'b331039ab43444323d0376d7a97501edd62bca26', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: 'dd9a5aa7cb2de0c4fc03d45994ec4f176b9da83b', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: 'a8e1e00fe3965f650d56054bbe9416cb4a2f96d8', class: {
+        return (h(Host, { key: '18c37fc7d84fbfe09c1eb285e16388ec70e9a307', role: "listitem" }, h("div", { key: 'efc47db8c7eb8f922c361ac9399196a7af3be21d', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '108f30568f7f84babd579658721f1c0448288ebc', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: 'b03774c0f0d44955355121d6e235882edda6838c', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
             }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: 'd6bfff88d0862ec2dcf3278067695169a528a6c0', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'af6ac987fcfc1b3756a4d8143f2624f54ccec31a', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '431112825f7667756b9bfb13e641fe290b60f244' })))));
+            h("duet-icon", { key: '085844d9dce555398be1e6889151600d54eb65f7', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: '0746ad63079cbce6f54f7be5b2679a786d711ee0', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: 'd0f45ff3fa075427e14b90ef6eb06ebc1c03ddc7' })))));
     }
     static get is() { return "duet-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,11 +53,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: '6005094e7bac41c2a8a29adf8046ca5231d34066' }, h("nav", { key: 'ac2500d659dd3c902963e7af0edd1e6432f2aa3f', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: '4d20f1547e8f5acfe24d4fdd0796467ff5d04a14' }, h("nav", { key: '65d6e31df9eb90f7e27b6855ba4e650541aa9eb0', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: '829e9f818a87449b89d41f32386e08ae6839497b', class: "container" }, h("div", { key: 'd9c34522bc6d2ad205c847e4e8fe95a71a4d3ff9', role: "list", class: "list", style: { color } }, h("slot", { key: '3ee81fac7e560f04536acc9aa13e3b342bdfc2bf' })), h("div", { key: '13b589c5fb63ca7ff2e8d7129a1cc835a2b6f424', class: "bottom-border bottom-border--container" })), h("div", { key: '9fa7fe0d22b33a77ba92f41eaff08fe3f5a739d2', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: 'e4956646791760eb37fc77028654e75792a256e2', class: "container" }, h("div", { key: '9dc16ff656071b0a10317a1b03c92d7b7dd92605', role: "list", class: "list", style: { color } }, h("slot", { key: 'ac9ef52d9eeb061225106b00ee60d7ca2b50dbd2' })), h("div", { key: '747853c441c9c296c4e03aafbe6483dfa31fb7c4', class: "bottom-border bottom-border--container" })), h("div", { key: 'fc9a3ab33eb29633aff8623257c81c49185b9e90', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: '063480653c78ec3af7af88f78668f46b1cd68344' }, h("div", { key: 'fc589663d377d0ca46888f970824e02d154a62f4', class: {
+        return (h(Host, { key: '534b9127054974a33efcc47a7d689a1e957195a7' }, h("div", { key: 'a3eb6e2b17742b28bbf72d99bb824616fdf197ee', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '8c2c3b0181f3b62104132bef2a8c6e2a1875012d', class: "container" }, h("duet-icon", { key: 'dbc8bfb4314be5079691951629f3639c3042e23c', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '7c441757835f32794f60ace1881cc4e0e4a54ee6' }, h("slot", { key: '6fee2ce133ad3d735590e7f9bf740e2aa39ae0ba' })), this.hasAuthorSlot && (h("figcaption", { key: '7f04066eceba4db7584cc676678e012601819204', class: "author" }, h("span", { key: 'f38084061413441a935186b4f4fd75e2048ea8a8' }, "\u2014 "), h("slot", { key: '0512a40598cdb8c637761a05fe0b3b90ed7bf22c', name: "author" })))))));
+            } }, h("figure", { key: 'ddb010bf709a04037d03a9e0864f6a91b061490a', class: "container" }, h("duet-icon", { key: 'b520dbf68afa65865b562c053a06ae7907056260', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '6c2f2ec722f53f2bebce2d455147b4decad9d243' }, h("slot", { key: '59ce6c30c39155fec448114fd25752585d95c87d' })), this.hasAuthorSlot && (h("figcaption", { key: 'b6599f6f3bff3b855dae865e6b03fc977d161137', class: "author" }, h("span", { key: '57a9fcc581eb85f634819905d57cb52e865ea4a3' }, "\u2014 "), h("slot", { key: '3338c10206046d6a0410c95e69d353e1ce52dd79', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -245,6 +245,14 @@
   z-index: -1;
   width: 100%;
   height: 100%;
+  margin: 0;
   cursor: pointer;
+  border-width: 2px;
+  border-radius: 8px;
   opacity: 0;
+  appearance: none;
+}
+
+*::slotted([slot=input]:not([aria-disabled=true])) {
+  z-index: 1;
 }

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

@@ -17,6 +17,37 @@ export class DuetChip {
                 this.disabled = false;
             }
         };
+        this.radioInputListenersRemove = radioInput => {
+            radioInput.removeEventListener("change", this.onRadioChange);
+            radioInput.removeEventListener("click", this.onRadioClick);
+            radioInput.removeEventListener("focus", this.onFocus);
+            radioInput.removeEventListener("blur", this.onBlur);
+        };
+        this.radioInputListenersAdd = radioInput => {
+            radioInput.addEventListener("change", this.onRadioChange);
+            radioInput.addEventListener("click", this.onRadioClick);
+            radioInput.addEventListener("focus", this.onFocus);
+            radioInput.addEventListener("blur", this.onBlur);
+        };
+        this.radioInputSetUp = () => {
+            const slotInput = this.element.querySelector("input[slot=input]");
+            const radioInput = slotInput || document.createElement("input");
+            radioInput.slot = "input";
+            radioInput.ariaDisabled = this.disabled ? "true" : undefined;
+            radioInput.id = this.identifier || this.chipId;
+            radioInput.type = "radio";
+            radioInput.name = this.name;
+            radioInput.value = this.value;
+            radioInput.checked = this.checked;
+            if (slotInput) {
+                this.radioInputListenersRemove(radioInput);
+            }
+            else {
+                this.element.appendChild(radioInput);
+            }
+            this.radioInputListenersAdd(radioInput);
+            this.focusableElement = radioInput;
+        };
         this.popupSetUp = () => {
             const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
             if (popup) {
@@ -186,27 +217,8 @@ export class DuetChip {
         unsubscribeTabbingChange(this);
     }
     componentDidRender() {
-        const identifier = this.identifier || this.chipId;
-        const slotInput = this.element.querySelector("input[slot=input]");
-        const radioInput = slotInput ? slotInput : document.createElement("input");
-        radioInput.slot = "input";
-        radioInput.ariaDisabled = this.disabled ? "true" : undefined;
-        radioInput.id = identifier;
-        radioInput.type = "radio";
-        radioInput.name = this.name;
-        radioInput.value = this.value;
-        radioInput.checked = this.checked;
-        radioInput.removeEventListener("change", this.onRadioChange);
-        radioInput.removeEventListener("click", this.onRadioClick);
-        radioInput.removeEventListener("focus", this.onFocus);
-        radioInput.removeEventListener("blur", this.onBlur);
-        radioInput.addEventListener("change", this.onRadioChange);
-        radioInput.addEventListener("click", this.onRadioClick);
-        radioInput.addEventListener("focus", this.onFocus);
-        radioInput.addEventListener("blur", this.onBlur);
-        this.focusableElement = radioInput;
-        if (!this.element.querySelector("input[slot=input]")) {
-            this.element.appendChild(radioInput);
+        if (this.variation === "radio") {
+            this.radioInputSetUp();
         }
     }
     getAccessibleExpanded() {
@@ -253,7 +265,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: '63d116523c6f8fd4c61d150adac9759f2e0e29a1', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'a3e43367f9e537aeaf1b257684888c067075e3e8', class: classes }, h("button", Object.assign({ key: '7a762c378f1d718523cb35bbf50ebaf60c59d062', id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '8f1a0d6e8f6a980f3da318918f5e21235140ebfb', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '2336e0011ee6931b63934af2e4982c06d9a0d456', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '7bf8172d3f1310d8cdf19d260eb2b0646e1dabcd' })))), this.variation === "input" && (h("span", { key: 'b5959dbf57ef68ccac4cad2368d485137303a5b6', class: classes }, h("button", Object.assign({ key: '6395bcf3de40496dae48c1e6f184c6a1ce969e5d', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel }, focusHandlers), h("span", { key: '47115e51b88864aba6ea47307d071f7cda181550', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '50c466515758a2f625435f2c35a3714d8c33f174', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '3dd5e1c1621582f7c7058bbc77d31748f6fab688' })), h("button", { key: 'e252ac9a1e9a710972a3e7fd6839ac6cee9041d0', class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { key: '9b4adf2cec01d524e9dc0196f972dc557d10d8a8', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '3c6c3c4f4d4402a7400e03b7d74fb95d352967b6', class: classes }, h("input", Object.assign({ key: 'bb101690fb37507a4405df9509aa7b469e48c255', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'ecd0105df1f88ff1d5ee22c74fd040e2ee19fd3c', htmlFor: identifier }, this.icon && (h("span", { key: 'cefe4394d500de2353bd7ae42b93c132c32a58de', class: "duet-chip-icon-container" }, h("duet-icon", { key: '57d6081fed000289fe066dc6ec4db761554557e2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '5c7b9acbf6fb5de394186734e636c93fcf175a14', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '770c2ff769e2fb063607d943735be580cc323d06' }), this.popupElement && (h("span", { key: '9e7095323427853f41854f6e0f1d5901c7f9207d', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '72031bdb57fa12468b8f318d6380f845ff272248', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'd1b2ac7c1fe1415094d639f57b3cd232a0355bc4', class: classes }, h("slot", { key: '4fd7346e9e40355f863a53aa95e97bbd05b94ec1', name: "input" }), h("label", { key: 'a6f74dc9687dc5abba3d2d3c4bb4cbbab8e72d6e', htmlFor: identifier }, this.icon && (h("span", { key: 'adf688f4c9a7a153c52193a8effd643aeaf1008a', class: "duet-chip-icon-container" }, h("duet-icon", { key: '7aca800ab15bcb1d1d7b86cd6276fbe37514e93d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '84000545953f8f7dfdf214a5dbdee3b029cd42bc', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '9364faebdb2a14195e36d4645ae81058e2c3a04c' }))))));
+        return (h(Host, { key: '83bf513ef7192b64d92eb428ca47fbdf317468d9', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '750fdb0037f02571a465c86dfed9f81a4e4f1110', class: classes }, h("button", Object.assign({ key: '49d5409a3600f91d6feefdafb207d17e330f53a3', id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '609549b8eb1bc7b9c3e7049f94dc9678b9dc259f', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '9167ad7ccd13479061d6849af2938bc868e51677', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'f8ab715a57220b96dbdbd2478207c4ba40ba325b' })))), this.variation === "input" && (h("span", { key: '0f1faa69c817a88de8716de8b261fa63688c899b', class: classes }, h("button", Object.assign({ key: '1955c7a24051d1c5b7671bf4a8438ee1c014b7cc', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel }, focusHandlers), h("span", { key: '3d69ad3ec1037f7b8278156392e902a2317f758c', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'c056e4f37ca87f98fb8743d5b723232e8335f83c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'f257712ed166db7feb280d894bb1c111fa6fe171' })), h("button", { key: '0735914e5223ab4aed75f03e08e39af6a10ced8e', class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { key: '3478c9f87f043e61f96a7595a35db8849c0c730c', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'a656fd6ce69c6201d0dd7407170c88c47e8f2a67', class: classes }, h("input", Object.assign({ key: '51dd1e0898d2af86d493e25b9d623d422a1e3ca8', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '60a550a09fcebb26e886503f0d9c637e6e2447cc', htmlFor: identifier }, this.icon && (h("span", { key: 'ba317cf437844d8c8694956e114687fa0d531daf', class: "duet-chip-icon-container" }, h("duet-icon", { key: '4e6bd4e5e0003bf649929dfdb36ca0f5b00e3e4c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '7d427ed0b6d4d15a1eb1b3c0515e3d0d119a5197', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '943da2eae596920b321008ca6d927411109555db' }), this.popupElement && (h("span", { key: 'ccff1c7a99e9bf1b96449d061526a6f207907dfe', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'b381a2ae097f9de261f971882520688b0857a02f', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '804eec75bc2347e568c5ebe9c994d909df7a6d15', class: classes }, h("slot", { key: '74bef72f091082f56c3cbdc01c6284a347de775f', name: "input" }), h("label", { key: '2a1fb8e4e0da4b7aa89fad54677e8cc3c0ea318f', htmlFor: identifier }, this.icon && (h("span", { key: '6bf61ec47a6647c05ef31fcef2d955740a37e55e', class: "duet-chip-icon-container" }, h("duet-icon", { key: '0c780d8a156ebb569408bbac96838b8627818b79', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'ed9beaf0e2c72f762c8abcc8ebec1a149ce4f31e', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'b1c9725c085d8d27b273eae4eba95b8c911343db' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -18,11 +18,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '7fd977069f6d90e931bc1cc546dd5dcb1b3327a4', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '6248db0eebc16f273f2e09182664e9aff4c8fc69', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'b2462908bca83b11023bd66451750e232403dbd7', class: {
+        return (h(Host, { key: '692074bb8ff3765800f6d41465a3597312f4da79', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '345bc0d43dfd9e43ef63fc8154a3f5cf663a284a', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '9a3d25fabd343baa33ed2bc6477117dabe38445d', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '58f1dfa0f6414c0b6e339562a7474d88f6ed593d', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '0b214dedac8059c30b3cd59abd0623dda52d53bc', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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: '3c9fa25aeb7c045d4b6125136452fbc000e917b0', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '305d81e0a0ca2879b9ae99198f5625aa72d7055a', class: {
+        return (h(Host, { key: '4a436cc9bd108107bc501a7643b2e93f5ac78e5c', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '47581ca62eb607cec4b8d1d37fcf5f18c2678a34', 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: '097d0fa2b4bcdd11fc20ab44ef4efb0cdee60e64' }, this.name && (h("duet-heading", { key: '2685492ee8f93e0bdfbbcc06069bede6254b95e7', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3e7ecd91d78612587c26fb59efeba51318ff23fa', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'db60baa08a325146189f570058a4eed39719794d', class: "email" }, h("duet-icon", { key: '73f29608b716dba93b17aaf31b35343084bae481', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'aa4a3b2e81e0abe7fbfffae19f728330da02ed94', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '8f357ececb303367c0f9e7a29b08a73e291696f0', class: "phone" }, h("duet-icon", { key: '95623b4884cd04f1ccf7a05dd6e0fdd29ea0efc2', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'debe51d2602cabd67192beb8e2a6b33f42cdc0ae', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '0c53c226300fe7fe2430b096cb755865f239e58b', class: "call-to-action" }, h("duet-button", { key: '59badc81218dbc05a54b0447d1487468cabe8024', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'e08bd939ffbeb843e958c046566bba918fdf1f01' }), h("slot", { key: '5e6b4e8be69e1b5fd6babd5d616e3d3cbaa78138' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '2146916a772d049a0a2c338e573c436cc799369c' }, this.name && (h("duet-heading", { key: '1883776b3095e2f5aa9c173a96e7822d1c938f0e', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '92b78c88c8e2d892719502f7d2505ed7449da8d3', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '833f2c34ebcdce0e5233f80d6d01a5d9db13aadc', class: "email" }, h("duet-icon", { key: '41310926f4b326de7de44f4a7346905386f80254', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '9ce96e8d1f5f73496c3b8e3d3c7d99e2de741c3e', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '7b184f7a81d165ad37c66a6075d3b1698de6264c', class: "phone" }, h("duet-icon", { key: 'b973fbdcdd02bea91e9adce6b2d94b7122f730fc', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '4ba2b90db91a2217590ce7bc5f70846dc87e9856', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'a292f1045430c6eeac2ec61eae9722c6ffe41f4b', class: "call-to-action" }, h("duet-button", { key: '103fa46548191a207bcfa65a32e426b62c3c4e4a', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'b02b1c4afca5fb77e9fd389b64f1f853433bc52f' }), h("slot", { key: '02bae65fb19132f6a49d7dc156e660e042385fc3' }))));
     }
     static get is() { return "duet-contact-card"; }
     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: '4b7d0d8326673fbc6e1e7c775e7fa4ee12d1bf33', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '24c00f00cb4bc4d9e765732e9aca337f8081e523', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '796efaecbe6ebd2dd9ca28bd48a7c0ca625171fe', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '637226c8d070993fade17dc1cb44e8db6c070d43', "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: '25cc5a4565627e7253cf51ddd8387242901e5291', id: this.labelId }, h(this.labelHeadingLevel, { key: 'b6fbd1a1aec1d5417c0402ca6e620989a214243d' }, this.label), this.caption && h("span", { key: '8f2d3a785504eff5b08dacdd91f7563ea8d23556' }, this.caption)), h("div", { key: '321ba668ccd5893bacfc4504144fe72afb9d7423', class: {
+            } }, h("legend", { key: 'a49cbefbe852732e4b2b4326acd0a462d90106a6', id: this.labelId }, h(this.labelHeadingLevel, { key: 'f5f1518e027266a0e2d584fa1a6b4376f5db78e7' }, this.label), this.caption && h("span", { key: 'cb39f09028e0dd245b2df28580493b6de584ed3c' }, this.caption)), h("div", { key: '06d122ad9ce4c683b3eabfba9fb75db65a098eb1', 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: '829ebed3b5303fc9745a4188341bc0f3265ab43c', class: "duet-fieldset-label" }, h("span", { key: '8b510fdf1f3986a02a9c0bf8d68af86958d74d7c', "aria-hidden": "true" }, this.label), h("slot", { key: '7cb0efc0b6f5790887cd1d1f971738d0050d03fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '60587899d57d4c56f83f2cc0419eed5e5d74fbc9', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '503211941d2c58bb3b7b84c5c4dfa587b01f2ae5', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'b37c634b0db76801085598ab9b9e2b06321448f3' }), h("span", { key: 'eb6c9de533eb068ef21e322df6d8e5f30ac75e07', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'ed99f6a92ade89c6e1f971dc4aa03985e3d87d57' }, this.error)))));
+            } }, h("div", { key: '8f82b4f9980bf6681e5fee90a4b781e65e23f2b0', class: "duet-fieldset-label" }, h("span", { key: 'eae1f845e20acf1b968997393e62ad8ccd3b0cc8', "aria-hidden": "true" }, this.label), h("slot", { key: '7148e9ad377dce9d87116e9ece609df2173f3331', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '948abdedb43e0de5a965d4f03d21dbb7c138b55c', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '94a4ac15cefd5f8dc70f52ba257b448f9ca3c74a', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '287a9d3649d0d24ae4bca3aa44009947ea3758fe' }), h("span", { key: '2b4acb42a4e06002428b01c170a5a003dfe3654b', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '93e6611df1d44a5a657e69ac71402366aa7d82cd' }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -229,15 +229,12 @@
   opacity: 1;
   transform: translateY(0);
 }
-.duet-header-items .extra-bottom-padding,
-.duet-header-bottom-utils .extra-bottom-padding,
-.duet-header-utils .extra-bottom-padding {
-  padding-bottom: 188px;
+
+.extra-bottom-margin {
+  margin-bottom: 188px;
 }
 @media (min-width: 62em) {
-  .duet-header-items .extra-bottom-padding,
-  .duet-header-bottom-utils .extra-bottom-padding,
-  .duet-header-utils .extra-bottom-padding {
+  .extra-bottom-margin {
     display: none;
   }
 }

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

@@ -497,7 +497,7 @@ export class DuetHeader {
                                 "duet-header-item": true,
                                 active: thirdLevelItem.active === true,
                             }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" }, thirdLevelItem.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))), h("span", null, thirdLevelItem.label), thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
-                }))))), h("div", { class: "duet-header-bottom-utils" }, h("slot", { name: "utility" })), h("div", { class: "duet-header-utils" }, !itemsHaveSubItems && contactDropdown(), languageDropdown(), !itemsHaveSubItems && (h(Fragment, null, processedUserWithLink(), processedUserWithoutLink())), processedSearch(), processedSession(), h("div", { class: { "extra-bottom-padding": true } }))))));
+                }))))), h("div", { class: "duet-header-bottom-utils" }, h("slot", { name: "utility" })), h("div", { class: "duet-header-utils" }, !itemsHaveSubItems && contactDropdown(), languageDropdown(), !itemsHaveSubItems && (h(Fragment, null, processedUserWithLink(), processedUserWithoutLink())), processedSearch(), processedSession()), h("div", { class: { "extra-bottom-margin": true } })))));
         // multi level variation
         if (itemsHaveSubItems) {
             const activeSegment = this.processedItems.find(item => item.active);

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

@@ -840,6 +840,11 @@
     width: 50%;
   }
 }
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.fluid .duet-hero-text {
+    width: 47%;
+  }
+}
 .duet-hero.duet-hero-product .duet-hero-wrapper.narrow {
   max-width: 888px;
 }

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: '56b942a1ac469f7ccd921c88b0824a31f43192f7', class: {
+        return (h(Host, { key: '036bd71920292b0eb364007a8d38b01a01e07ce3', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '0c151b14def0111c53d55b2af24a8484211dfc8a', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '2959987408354e2be6c726b2d66087479c0651f0', "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: '971aea6375e7dda9fbef44d886a032c9214e09a5', "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: 'e75af917059142d7f015109e7224fba0cc2e18b3', "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-layout/duet-layout.css

@@ -11,6 +11,23 @@
   appearance: none;
 }
 
+::slotted([slot=page-heading]) {
+  width: calc(100% + 32px);
+  margin: 0 -16px 0 -16px;
+}
+@media (min-width: 36em) {
+  ::slotted([slot=page-heading]) {
+    width: calc(100% + 56px);
+    margin: 0 -28px 0 -28px;
+  }
+}
+@media (min-width: 62em) {
+  ::slotted([slot=page-heading]) {
+    width: calc(100% + 112px);
+    margin: 0 -56px 0 -56px;
+  }
+}
+
 :host {
   box-sizing: border-box;
   padding: 0;
@@ -41,6 +58,9 @@
     padding: 56px !important;
   }
 }
+:host(.duet-middle) .heading-wrapper {
+  padding: 0 !important;
+}
 
 :host(.duet-ie) {
   height: 100%;

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

@@ -5,6 +5,7 @@ import { h, Host } from "@stencil/core";
 import isInternetExplorer from "../../utils/is-internet-explorer";
 /**
  * @slot main - The layout component’s primary content. Use this for the main content on the page.
+ * @slot page-heading - The layout component’s page heading content. Use this if you want to have heading inside main landmark.
  * @slot sidebar - The layout component’s sidebar content. Use this for content that is related to the content in the main slot.
  * @slot top - This is a full-width content area above the main and sidebar slots. Could be used to show for example alert messages.
  */
@@ -15,6 +16,7 @@ export class DuetLayout {
          */
         this.hasSidebar = false;
         this.hasTop = false;
+        this.hasPageHeading = false;
         this.sticky = false;
         this.margin = "auto";
         this.stickyDistance = "with-links";
@@ -29,6 +31,7 @@ export class DuetLayout {
     componentWillLoad() {
         this.hasSidebar = !!this.element.querySelector("[slot='sidebar']");
         this.hasTop = !!this.element.querySelector("[slot='top']");
+        this.hasPageHeading = !!this.element.querySelector("[slot='page-heading']");
         if (!this.element.querySelector("[slot='main']")) {
             console.warn("[DUET WARNING]: Nothing passed to <duet-layout> named slots. Please use one of 'main', 'sidebar' or 'top' to display contents.");
         }
@@ -38,26 +41,26 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0647cb148ef8d6e27dfc8733854bdece644a2f11', class: {
+        return (h(Host, { key: 'd7002353acb1bf62a3881852a8224c893da5c029', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, this.hasTop && (h("div", { key: '93b8d11681cdcd0e063e08f62f3e8d9c4682ef69', class: {
+            } }, this.hasTop && (h("div", { key: '09ca28f93b730e8b95e76e7bb83f4561312eb0ab', class: {
                 "duet-layout-top": true,
                 "duet-m-0": this.margin === "none",
                 "duet-center": this.center,
-            } }, h("div", { key: 'acf886364c56f0ac0a979a680ebe9a3548f15b5f', class: "duet-layout-top-wrapper" }, h("slot", { key: '8c3ecc05c8ecfe7485e44fb30c9b3edea98acf3e', name: "top" })))), h("div", { key: 'f3f54254dc431cc83eea2e7a1d7f208f28bda58e', class: {
+            } }, h("div", { key: 'fe4e537e589205f6a1c024605356ea3d0396164f', class: "duet-layout-top-wrapper" }, h("slot", { key: 'd9495c85dcda3042c1f783d4c6b3435690d57d5c', name: "top" })))), h("div", { key: '3733c28fc043441b5ceb782c9035312bf5ef718d', class: {
                 "duet-layout": true,
                 "duet-layout-has-top": this.hasTop,
                 "has-sidebar": this.hasSidebar,
                 "duet-m-0": this.margin === "none",
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'b676f67b4cd446ca21d9ba571715a1591ccbb6af', class: "duet-main" }, h("slot", { key: 'efeb3b727f88ac03a86630677877b2f4a3df5544', name: "main" })), this.hasSidebar && (h("aside", { key: '0e327c7aab74483c878fe944e9a186932400a1cb', class: "duet-sidebar" }, h("div", { key: '0bbda350b036b27ddf5dca11635fd8022eed54a8', class: {
+            } }, h("main", { key: 'cc3d3a4f6c7a5cfc7375430ab0920f8ef0e9adc3', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '8ae7d75fc38bd7b60aa9cab63e0aaa68e7007685', name: "page-heading" }), h("slot", { key: '46db410f500910c52f95766dd82bb40426450006', name: "main" })), this.hasSidebar && (h("aside", { key: '6447d8390b3915d02d47ead19852278ed2371ae3', class: "duet-sidebar" }, h("div", { key: '0841703c5f1ce1a549ff865f45adfff33f826fee', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '3527bcf06aeff1bb118f6f5901807a694439b688', name: "sidebar" })))))));
+            } }, h("slot", { key: '1e131d9c0fc743fec8aeb42a68df278a718b80a0', name: "sidebar" })))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class DuetLink {
         if (this.accessibleLabel) {
             return this.accessibleLabel;
         }
-        if (!!this.download && this.element.textContent) {
+        if ((!!this.download || this.download === "") && this.element.textContent) {
             return `${this.element.textContent}. ${this.accessibleLabelDownload}.`;
         }
         if (this.external && this.element.textContent) {
@@ -144,10 +144,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: 'e36e1eeaa70e3b27fdd7bedc29d5cc1eefd6bee4', class: {
+        return (h(Host, { key: '38d90e4467279d94a029c7ce5fdaf9fa3590d5ae', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '67c80605b613db0d14289361318d4bfe090beca6', href: this.url, class: {
+            } }, h(Tag, { key: '5b1b7b691a3d66382b593a07fd47b3072fcd12fb', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -72,7 +72,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '134d85e7daf9ff81e49dddbc1c0877548651f8fb', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '46080db7331197a3b17627c15a11e3540e3473b8' })));
+        return (h("dl", { key: '1fe1ac541aeae071f5684e90937cee1a4be689d6', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '166ca55ff1ca8e804357bf991b84ede3eac45d13' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,14 +16,14 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0df4c6498653a7f20f8ac8d21f1044cd5ffd509b', class: {
+        return (h(Host, { key: '5ca1067fca4b44ef1a3b57b52e775407879ab750', class: {
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: 'dc9ead4dada3ad614b7099be0e86d80e05971257' }, h("slot", { key: '48f7393a2af77be1e716dbb617de3951d5bfae8c', name: "label" })), h("dd", { key: '571e2c23a8de7facceb48bf8bf2924f34e7a9505' }, h("slot", { key: '2b5f6420744bbac07db85a58d9b3524f86b51549', name: "value" }))));
+            } }, h("dt", { key: 'c8141e0af55f96c0dae8fbb8a50e74be470dc6bd' }, h("slot", { key: '583b9d7f5109da8f0185abcf07ca45d6d30944dc', name: "label" })), h("dd", { key: 'bfcb5056ec7fbb9412084e3eb95b610f168d7559' }, h("slot", { key: '3b844ecbbf9dbb82e2b4d9ac44cad328104865da', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '60e4ad6fab721948a825ad38f57e786997f3813a', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'aad1889f604efe3c8bb8e294a625f2b544ad672f', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '5d084305a0696301d4a6821758e0689a4c7cb24b', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'bd7ff8798ac2294e92714074abc3a40ac09f84a3', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

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

@@ -114,11 +114,11 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '9386904e22c17ede07fce421b4ececdcc4462311' }, h("nav", { key: 'ba224a6339f5402655e10937fb21812c7c174dc8', class: {
+        return (h(Host, { key: '967d5c3a2b52d99336f77c65189b5e458166e20a' }, h("nav", { key: '0269eca4392db3aee049ba6341719c4c6bd728bc', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c0da13104e0e312f453ba493cebc3d523635e2b2', class: "top" }), h("div", { key: '03aaa19f264070866cc7e6536a7679972d53e3f5', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '72234559418bbf0fbe2749343faa2e0d7cb07f46' }, h("duet-logo", { key: 'dbbf0ecca199c2a470390441038c014ac147a7c9', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '55048a334800842fbd6b6cf55917d10f8eea6642', class: "list center", role: "list" }, h("div", { key: '6934aeb5d219dd31d7ad22993b08fd025e0c0e37', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'edf21f84609df58a98fca817a3a5f25b4128bfb0', name: "center" }), h("div", { key: '30d07068be15b133106e2ab6e6953029e08ca792', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'ead4201e0e8df9a2e1ec43254c3a63d167ff09da', class: "list right", role: "list" }, h("slot", { key: '66cb29f7147b514d6944de416aacaa15b21fc730', name: "right" }))), h("div", { key: '4e99473e810bac89400b9493887e9289340d0bdf', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'f0714cac1580d0dad6109ce810a30cb9b8e31ea7', class: "top" }), h("div", { key: '6e2b8a7aeb95bd4edc59c71d6fd600c64668ca00', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '7b719a3581ec0aeb360c3968ac32f7e0bfef2f8d' }, h("duet-logo", { key: 'f195dc3f95e3b8c46e51921ec9097687a01482cd', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'cedfe9fd7cfd8b81fdc2192b29536842e86164cd', class: "list center", role: "list" }, h("div", { key: '1b47f13f17f7215107307a48aebf3af6eae98ceb', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '7ecd7b75b1e971dd03b5fa5c420d1482b106e37e', name: "center" }), h("div", { key: '57d6a671dc39903ae6feca1bc1e2d4296b67cd5f', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '58cfdf2175cfa15f900ebb368a57e2c66afcef19', class: "list right", role: "list" }, h("slot", { key: 'cce27bba83ad382ee7721085cf231dc229f19375', name: "right" }))), h("div", { key: 'dd61b57a21d74369d9b5d3a3bf33eb2079406a62', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2d7d290b93ece34e74dbecb9b7d30a3a899b37b0', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '99cb1fbd3aab73f4c75484ee7755c00fdf521965', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '9206620e16533fa13b7b84f47b8543a70a7b2410', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'e172b1d487ac1b425e26b56485f03b6ee2453110', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '811e8d68347707cf1011a541db3e857ec947e8d4', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '543ce298b12035fd8ebe69dfa5ca25f4c431a277' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '46afda060d34d192871f0601c64c188236389aed', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '61ead72d9ec280bc7a757582c62d7028ce400d22' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f7cb616fbeb0e89cd04e89f7a19b73e4f6305b57', role: "listitem" }, h("div", { key: 'a3f4701b11e9317377629b5fe2148530dab3c0a7', class: {
+        return (h(Host, { key: 'b7505ee892ea3ee2d0e0f37e3638b7d2b783712a', role: "listitem" }, h("div", { key: '751e646811727d6f6a24a416df10f1c543940879', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: '928feac0a153bab46435694b95f4b0cbb2930874', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'fef18c42d08e89e0db82ca29c0aacf1cb9ff5326', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '7bd089cdec793c5853d3a2fb50c3f5c4ba579a4a', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'baf4943655e0fd4ec680eec5ecf523828ddb2584', class: "label" }, h("slot", { key: '726942f2da202ad37393a7979a5ee49d3c830561', name: "label" }), h("duet-icon", { key: '68c1eb71b7c4112ebc3ea30d62324c7c1b0aea4e', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '0f1c939e3cc1b537f176ca076a2e20bc38f804d7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '76888e1deea9cbb8e7bb3bdf5336669e2ae413e5', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'd6d0c4bd9426aa41b4ba68b222669c922943150b', class: "label" }, h("slot", { key: '6478ad4df0cc0f954ef1a2ea8c4d7d6379e3ee83', name: "label" }), h("duet-icon", { key: '4118eec0a8f4d17b22aeab5efb9e7af3d9c6d096', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'd7026456d474f327320675a3174ec3eb1caf706d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '62b2f301e57348d2308017ceaff0f22b8858eaef' })))));
+            } }, h("slot", { key: 'da2e4f2687f3aa80426a260df734e79cdb69c48a' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f7702f6502c6ec2bed8ef4d87146a6523456a5e4' }, h("a", { key: '5923a9d404aaa1b183edef94c7f66e305a0d4a46', class: {
+        return (h(Host, { key: 'e3310b8dfef57c95572f69574ab3f2844f0a8fd2' }, h("a", { key: '0bc7dc99b57576902aa56cf53e0f0a092d7d1606', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '29ac748920ac962f47fd43548ccdedb42b8517e1', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '6e1f0d21b27a696c4bc2ba6369d884e7acc77db4' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '0434d95f76ea5e61047da18bac14f7261626a161', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '8b32a81bdf0bd30bb14486a8593e31f1cd86632e' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,11 +32,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'a8d19e16b23cd70c744f29a603093db8846d522d', role: "listitem" }, h(TagName, { key: '84e76a7bc574e20f77c1e8a09531e40c80d3d7f1', ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'd2a4ae5947cf7b820de11d1c92be082aefa72e3f', role: "listitem" }, h(TagName, { key: 'bb5eef2f76aed3e48357bc4cc399794df49ca320', ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: '4a80b815a0d9ee32e7ab84210bfd0f004a754bd6', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '334e9b3d14cf86e8b3757f34953b047219b23a98' }), this.trailingIcon && (h("duet-icon", { key: '8faee80d1e563ad7abca96c635f193a203ae44c2', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: 'f0a8e147fe0b4e6beb3e9c0e68d73d17d8903179', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '290f322579d4af32f271ae21d86be07e4938dced' }), this.trailingIcon && (h("duet-icon", { key: 'a34778af006706400452949461d96ab1dece7608', class: {
                 "trailing-icon": true,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,

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

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '094d7e86967446a1b42ad3c0bd117815807d119c', role: "listitem" }, h("a", { key: '0b7f1206828ff009f5470b77f6bfbf35cea8a096', class: {
+        return (h(Host, { key: '570640efc7db1d51c8ec33f775b2b13ffd8fd909', role: "listitem" }, h("a", { key: '62ed2f6bf339d40211f56ff0e78ab61aa71a6c9a', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '38082080f6bc0ac1ba5bb01a007424ed85c681ad', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c1b71a2b6af96adb50d6b47daaff277e4d369527' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '45e66a513cff3cda4b8f4ab51fc0d404391265a1', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '144d7755346f5dc042b2ad7836a3020d954b6648' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }