@duetds/components 9.6.0 → 9.7.0

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

@@ -206,7 +206,7 @@ export class DuetChoice {
         if (this.accessibleDescribedBy) {
             return this.accessibleDescribedBy;
         }
-        if (this.collapsible || this.hasInfo) {
+        if ((this.collapsible || this.hasInfo) && this.getExpanded()) {
             if (this.hasHeader) {
                 return this.headerId;
             }

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

@@ -115,7 +115,7 @@ export class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: 'f3e73e4259a6408e8bfc9b00fb4033c5117ff5bc', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '1c6ff194a2634737d39013138a7a45fda32538ca' }, h("button", { key: '745c07a149e5cdb0f4ed7931988f16578acc17db', class: {
+        return (h(Host, { key: '635e0fbe69079d10e22ad538aa801af89c4cde51', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '21b389ec1a302511cf0d06887dda85b929e60cf6' }, h("button", { key: 'ae26817023a1fd98f2f499452ae013e1e0625839', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
@@ -123,7 +123,7 @@ export class DuetCollapsible {
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
                 "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: 'fd1340099ac09fc9b1179c8847d5e5f982bfec4d', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '4b0a86f201322a21f14994d5efab986930847ee9', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'c87bf63f84215ff8a55a0002991dc0688f6e757b', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'e6dec579ae41cc0e7aa9452c69a1f3ec80dd5558', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'b518e6dbbaae9c2f84979fcca6cd00fbdf5ab959', part: "duet-collapsible-after-heading" }, h("slot", { key: '5ab5b2ab6c41c93250244b1d8c75b4f061ed17aa', name: "after-heading" })))), this.caption && (h("div", { key: '42f4464aa6ef6c275d0357fda56d4b95ad321bdf', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'fb4c4a5effb018af94f74ef3b37cb02c58704a3a', size: "small", margin: "none" }, this.caption))))), h("div", { key: '1eabff6b7f58e648aa65357bf190034158c60b70', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: 'c799b44772fa7298fa93b911fc2ebdf2d41b1dd4' }))));
+            }, 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: 'f6a80e26d50292e133d2e0cfc963102d12f83acf', class: "duet-collapsible-heading-wrapper" }, h("div", { key: 'b3a38601ed2de77a2a1c3b2235494c6b91f546ff', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '2f66e1bdfa846ae83fd953fc6558f69491930ca2', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '6a501a3c2a7db57fd374274990a19dd39909c536', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'd71fd226576c7e177732289ecf57f0f0ef382ada', part: "duet-collapsible-after-heading" }, h("slot", { key: 'c845fa7c1d90a10810db86cead6b17b2314c1175', name: "after-heading" })))), this.caption && (h("div", { key: 'f12be1abf64e46a18b6bf128ad1bd0b2594d694b', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '4d13deac84f03a1349e73c7e3bb079a2760822d1', size: "small", margin: "none" }, this.caption))))), h("div", { key: '75020eebce7bcb86e8617c38c11a6fc15b57f7f8', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '2e06b159d1dcc2c3ecbde2ade71464ceb6604d5e' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }

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: '17740378c0fae56940762f5c1807674866bc6a43', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'e981ac2b95f34861f49a5099d9572f1b88a42ba2', class: {
+        return (h(Host, { key: 'de2706d6aba03e8de9dc6c048f81eb8d334af5f7', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '762f5154121fbf1dc8bafb92595b291f82a011f1', 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: '9ef8552405f11afca941434adfa3788497256571' }, this.name && (h("duet-heading", { key: '3a56b3b1a37a798121665dfd29218aee39c3f90a', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '61749733435f24fe901941198683e221fbee7c40', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'eb2a3e85c0cee904c46dcb27b233219391e9a8a5', class: "email" }, h("duet-icon", { key: 'b865aac36d409907f8bc2df0499796b037c70717', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '75bd0bebdb1f8dcdcd0afe0675f9144e55648a5b', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '5a513b3311a575fa76f9013c8fef7e9ec2527307', class: "phone" }, h("duet-icon", { key: '69aa9446753fd6dd6d68d0f0498c3b91da6390eb', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'dc77056989f67752334017d85750319a9bf74ac2', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '9bf3cae826e24eb289ef8771fd8cef6e13107a76', class: "call-to-action" }, h("duet-button", { key: 'd589fe2ca11812bf4d5985d0aa5325201314f226', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'cd59d271c613f263b0280f40afb4c971126bd5cc' }), h("slot", { key: 'b6fda2e690e6266cefca22703600f4542a2b78be' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '5842b3cf401981d0c06cd644916669eab604bae3' }, this.name && (h("duet-heading", { key: 'fde8f62fc3664388be9644f1a3c38966adfd298c', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '1b036c57a6e3e0a9e4669b0e12304c5a6977c112', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '6545c1be32cff4f5aa0ff43cee338c9b857730fd', class: "email" }, h("duet-icon", { key: 'c5f1abb56941064a201337bb44f8b773853e60ff', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'ddc6c729a1abea64a502403b75221fb813fa4c8b', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '5dc0b7078b20a9f1790fe2a04b4fa74bfeea65b0', class: "phone" }, h("duet-icon", { key: '1d29a1b982d4efeb7f685b8ecbee8db257ab63cb', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '989b6d03684dcab0b99031e05e323185d5aa19bf', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '20263d42cf642136939c5920bc235c599ca8cb01', class: "call-to-action" }, h("duet-button", { key: '5a84ba6f2d66651f03caf0338050bb7dd8c21a7d', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '0f4bbbefc3beccbd9d81bfa65af65c44cfdbb231' }), h("slot", { key: '0a50d298edbb6dc88d428e3ddae6c00bf84658ae' }))));
     }
     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: 'e8dabcf5acaef5159164a8ecdbaef9340660732a', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '0c6121a202c18c8239c77f1fedfb3bbd80c1ad00', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '8c159018b562878b200913b26d7095d1702c7d11', class: "duet-cookie-consent-content" }, h("div", { key: 'd54ccc56226df5778173f18bc85d9fe1afb62f77', class: "expand" }, h("slot", { key: 'c9b430472bec14e34e934fa2d9fc80b1a9dd1ec8' })), h("duet-spacer", { key: 'c4334763366fa1eb2b0fb6fef3632bb77f59ddc3', size: "large", direction: "horizontal" }), h("div", { key: '8b9673e55d8abcf0f842073d2ba49b8ce7b62a08' }, h("duet-button", { key: '453d68199c48d2fa2329b5763fa49ea078ba8561', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (h(Host, { key: 'db3ddd8a0a2407a2e384bde79d7127ef256fb6b3', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '1276595c32686fa653ce214b91bb84d99227a5a8', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '5a0ca08d5d0367f808b47aa8407a8dd19bf4027e', class: "duet-cookie-consent-content" }, h("div", { key: 'e448fd48efdeaa9f910feecf6351e70568881717', class: "expand" }, h("slot", { key: 'ead0e808039184f468a7f0947673d0067b7a7884' })), h("duet-spacer", { key: '5153035c18f03ee55385cc55596d311f333e6f0b', size: "large", direction: "horizontal" }), h("div", { key: '4cc34ed5e5ad66f7fe5df3feddfde240006acbd7' }, h("duet-button", { key: '852c21cf5ff585330d3c323b785bb284a0a097e1', 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.js

@@ -179,6 +179,7 @@ export class DuetDatePicker {
         this.echoPlaceholder = false;
         this.disabled = false;
         this.error = "";
+        this.disableBuiltInErrors = false;
         this.labelHidden = false;
         this.role = undefined;
         this.accessibleActiveDescendant = undefined;
@@ -330,10 +331,10 @@ export class DuetDatePicker {
             tooLong: false,
             tooShort: false,
             typeMismatch: false,
-            valueMissing,
             badInput,
             rangeUnderflow,
             rangeOverflow,
+            valueMissing,
             valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
         };
     }
@@ -396,7 +397,7 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { class: "duet-date" }, h(DatePickerInput, { 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", { class: {
+        return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { class: "duet-date" }, h(DatePickerInput, { 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.disableBuiltInErrors && 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", { class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
@@ -713,6 +714,26 @@ export class DuetDatePicker {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "disableBuiltInErrors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-built-in-errors",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "labelHidden": {
                 "type": "boolean",
                 "mutable": false,

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: '068f4f4bf6e6c0b8fbe92a5eddd74db01aed9f87', class: {
+        return (h("div", { key: '6f7070cd1039fa6f21a079e0d3c6b3682678ad91', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,

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: '0dbb403057be09dd70ed37b4a86b05b009f91775' }, h("div", { key: '31f92a9a4f348fec70a080f830ae67d702a6860b', class: {
+        return (h(Host, { key: 'd9379ed3e41dcc39f9fdd2e7f79e8b9c56e1043d' }, h("div", { key: '6294425e1d8ad0ce15267d9e3173683af71e7c7b', class: {
                 "duet-empty-state": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '0f66aafaacc31a9c2dbd435cebe833d34d793957', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '87d09966693986d96432abb85195443e7de96ae0' }, h("slot", { key: 'bf7a235ee787ba0b7796ef9a5cb6606fe09a641f' })))));
+            } }, h("duet-icon", { key: '8d899d8c9828c5b711b2ef343f47eee033465db2', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '2787d3e6c2ffc6d20d09a14271dd39f10e37fb93' }, h("slot", { key: 'b155444859f180ff4772185c09bc055820c11585' })))));
     }
     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: 'a5dbb829fe1740377b3063db2fba3453d55ef821', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'cd1965e9f81c0b64e1c3d680bf531a64c2400821', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '689308ad380f1776b68044eececf0a1b6a970a26', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '154a0abb50c3f8e73f18743ebb0df6561f0cc545', "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: '6d624bedd2fc5227677ed6c936bae4064fd234ce', id: this.labelId }, h(this.labelHeadingLevel, { key: '3f2483f01754947aafc2c551f0be991ccbe123fe' }, this.label), this.caption && h("span", { key: 'bdf06458adc1f508612ae40e8cfdd53f6664e3b6' }, this.caption)), h("div", { key: '267049a9da357f3a6055b75e897239a0c885522e', class: {
+            } }, h("legend", { key: 'e179e8a70e0e2ec56fa5c03fbf61c80d93f2ee39', id: this.labelId }, h(this.labelHeadingLevel, { key: '345404d0d1633085c69e7b4eb8a91a0968d855e5' }, this.label), this.caption && h("span", { key: '68ea692153d49a86d5dc7ef6a1025010bd300562' }, this.caption)), h("div", { key: '14abd8ce6ae960076ca6c1f1cd4784331ace1cd9', 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: 'acd25bb3d3a9b6717ef5c19b571fae905b570175', class: "duet-fieldset-label" }, h("span", { key: '0bb0395172d2149d61f9179700bebbe85c06c43d', "aria-hidden": "true" }, this.label), h("slot", { key: 'ca18b6ce7d1912a335f6e7f3883b32bc3a4a14e6', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '49c91cd78b49a259fc2ecb0b8d6e6aaa8945a246', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'ca04537bd6a070536daba5f0ea39c695d6af9a9e', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '170972e9f2a7cce5b8264b584849044fde1e2e1f' }), h("span", { key: '7b5e3b08f459e52af0515131a3f149e131ffe81a', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '7c4b032b28bb6ed9ade3494c34b41b85994e7180' }, this.error)))));
+            } }, h("div", { key: 'a449833d46bf641a644477fa2e3f5a1994dabdda', class: "duet-fieldset-label" }, h("span", { key: '8fd39462a54b101788bd32d0300e5a1fc5218170', "aria-hidden": "true" }, this.label), h("slot", { key: '801025782345d17a110ef0c6f950ca6390d4b26a', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5748cd9834d5bff9eca0f4ae738adb570610b309', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'dc6d8bf5191b312be93a94cdfa1546041f9faeec', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'cf69ca768a09d44ff8a64b2bf0e30e300034306d' }), h("span", { key: '0a7d9b4619f2f712ad87224bf2c89690b64e151c', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'd593737a2a9c22e9a0c2c22911e9a22ec892cbab' }, 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: 'defb266e2408734741f3749f8d3255010cc4abfd' }, h("duet-visually-hidden", { key: '04f0329352b9c48346478090a8a25c1aeeec52de', "aria-hidden": "true" }, h("input", { key: 'ba1bd9fd6d3e26d5eed79b00d32649c5180a7ba8', ref: input => {
+        return (h(Host, { key: '8396e4f72037611465afcc4864baefce0b0adcbb' }, h("duet-visually-hidden", { key: '3760925c4f8909f5904fa42640a975782296c311', "aria-hidden": "true" }, h("input", { key: '8a696fbc3046b041f50ce5212bf0e1696a0661f0', 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: 'f496b6f51c1dd8934051f1912b4db06172b65b7f', class: {
+        return (h("footer", { key: '2f5358cae2af364591436b923621558a7db0b892', 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: 'a3c77fcaa80b1a6227c67fdd7f786ca0db98d570', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '44291443c097942b61ebf8bf548a68d16c142c54', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '55bd20ce5008bacebb5258d6abb3060f79055cc8', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '439a668cb7bf800d15a16e04cb65c0db890821f1', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '29721f537178f39d39c28beb7bb3a98fe161aad5', class: "footer-top-logo" }, h("duet-logo", { key: '19cf2b665b55434bdf407400d977cc2921cd297d', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '03210848f5974dabd4fcbfaf92f3b65f5d164fa4', class: "footer-top-right-container" }, h("slot", { key: 'e3f62dadd619e0f1125c084767fdd13623a4847b', name: "info" }), h("div", { key: '74496ea03e89b4d5b3ed908b92ae2f34fb77717e', class: "footer-top-items" }, this.processedItems &&
+            }, part: "top" }, h("div", { key: 'a050517126f6e7b7387a40d4780f31fd8c61df96', class: "footer-top-logo" }, h("duet-logo", { key: 'a3d3dfd589b1a6a2c28942b7bbf06146e2117a2b', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '464c8146c94cf0d301777700924b7fb446b86526', class: "footer-top-right-container" }, h("slot", { key: '15486e3da1f50b0b42875f81c92739bb47ee0988', name: "info" }), h("div", { key: '6f6addf850f9abf70a3bec2d7fb990c6ee8bc79d', 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: 'a8cf4161ec90c879087fd89f583f25c70df72fa5', name: "extra" }), h("p", { key: '08d905926f15fa486eaa9f4efb85578bad4151ed', class: "duet-footer-menu", part: "menu" }, h("span", { key: '81ac9fa3b4bfe95af7618a541491fc19e7bec687', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '53134f08a13719fe4613ffcf381c451ac97a3ad7', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '10557b3644ea760d5cfd1f575d3e5b3ddb010033' }, 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: '3b1f27038bb1ae1d7be3dd15f1f31ecd0f016cf0', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '9abeaa9ef15e10aa69f0c481f8cd3b1b65ab4273', name: "extra" }), h("p", { key: '9266f09430c4ab355227d765ebb47019453cd175', class: "duet-footer-menu", part: "menu" }, h("span", { key: '0b9db71f2534e447db290320c03af61e719c2d20', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '5d989664700ee20c32bc3debcfc71fa167976514', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'c38f8fa4d356c5f83159e94c445bf6779b357c8b' }, 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: 'c9a5926823a901f267f0369a97a244bc2596b6f8', 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-heading/duet-heading.js

@@ -34,7 +34,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: 'a93d5f854dfdff0e491ff60abc6d87980e135f77', class: {
+        return (h(TagName, { key: '503e72f1d157423d41337a6ac71c1032e611b72b', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -45,7 +45,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: 'f3bdb5d476c6fc8b64770b39a3fff70ddc1d8c65' })));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: '5d267eda1aea3d9d8284864c0386c4099823a6c9' })));
     }
     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: 'a87828015bc3f0f5c3a2ebf27e77fcedc22506f9', role: "region", class: {
+        return (h("div", { key: '1f3ac3d92ecbcce710c1b1b1a9d0b2871bc959da', 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: '2fa35e6204a50b7cdc7204a479e76259f6f8f1f1', class: "background-area" }, h("div", { key: 'f501941190779990a908f4231ae1d13dbd88f885', class: "background-container" }, h("div", { key: '2882c189c2cd2a5d935e6696803d824302d25786', class: "background" }, h("img", { key: 'b3e1e5a318dc54df380ce587b9ac8dd8dd763b1d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '598a744f8bc5135623cd146e564ebf698b3d7425', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'edf2ee1c1fcf7f2bfae9a381817ad7774095f0dc', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'f6ac809140f88bee0ef77e5d8e9d91457959e66a', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '941247c27dc7c090d80313a05c6dacd0095a8874', class: { background: true, [this.layout]: true } }, h("div", { key: 'fde132fa5e470076add7b44fe7ee85f79c358621', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'cd5ee36edea14cef1fcebaae2e5856920c7f0542', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '2af0035ca5695ea7867423cb52378d8bcb3d39e2', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '3afe983e23c61a117f253e574507caf8008fafbf', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '63b551956d71b4c159fe59e6a12b88d66870e19c', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'a8f031ca703c2fb07a39f949311c6a81bfbc0271', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '977acee94a864aec517a790fccd26eee1225fc06', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '252fa241ba5a26190fdf4fd67c2164540103bf4d', class: "background-area" }, h("div", { key: 'e889553f01e98e675fade7e95453e8326203e5dd', class: "background" }, h("div", { key: '5278ab8ab65218454f88067861648da388de54c0', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '98b95126eef339a39ff4672e150c0f7ac3b3666b', class: "brand-shape" }), h("div", { key: '74e8794a0e42ee488c75d7a4ae4a896834ce8b2c', class: "brand-shaped-image" }, h("div", { key: 'f2674542259c08a22d068d60628371cf1b8a7c61', class: "brand-shaped-image-wrapper" }, h("div", { key: '3d51348e1a932fa020a85c0e8a1cb685f0826b73', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'e86afdaa1676423a8ac70d198662c641c338d11c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'a8b81d0c8d0051ae30ad5cc8788e739dfbfa7ff8', class: "duet-hero-image-mask" }, h("div", { key: '5bd96d05a85e2e4c38579eb3037656d36e308334', class: "duet-hero-image-wrapper" }, h("div", { key: '758c546633d47aa8a5565fbd67dbe1fd7ff487b5', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '03dd32603448da8bf7d121c2303aa2157a26b5f5', class: "duet-hero-back" }, h("duet-button", { key: '6e729b39b25ba5e264eee216caa314b87c33bfef', 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: 'cc2b5fc035028fcc794ebc4fed0e47dabf113d14', class: "background-area" }, h("div", { key: '877d4f3dbb1c55e57746583bd7222cfd36f85f19', class: "background-container" }, h("div", { key: '13f15b3bca9e43ce9f5eb6b6e09d4e1fe64eed0f', class: "background" }, h("img", { key: '78fdbfeef361e5738c92247d813d265217cab7c2', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '40d2607ed6cba7db994f26e29141aac3afa9a93e', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '94f7dc4bba3edfd18b4174f24adee009cfedc08f', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'd21b011ee9c6f31e0e62a05448b3451cc901a405', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '4bb1fbc995849a06011a753d187b050dd7c082d9', class: { background: true, [this.layout]: true } }, h("div", { key: 'f57332554b74dfc95610754c40a8917cf5ef150f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '60c4bdd140fe90cfd574875a0e5702d92f59816d', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '13a71f7719f4528fcc3dedfd223162bd44c31ace', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '7ed75e8fbc0244c6cbdcb80812d7397ce0eedcd9', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'e7f3c6c6da1826756b8fc7335dd7c34f60040e28', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '8d9c4885e88db588b6fb74a2c912750fce37eb29', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'f949a84adeb136052263e5315c12cf74db11f0b9', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '3bbe9c16d041643fa4aab737aab1784a22ecedb7', class: "background-area" }, h("div", { key: '09cd70418a676ea606b35aeb695ca543f419349c', class: "background" }, h("div", { key: '238c817aad225e31a79cfc9c2b913e284f280c21', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '603dac6307834d67c9ff5838a6512b8d331c4d70', class: "brand-shape" }), h("div", { key: 'ca6013e79a7fa6592529e73f006f0a65d61da30d', class: "brand-shaped-image" }, h("div", { key: '2af6e66e338db1f59510d26140d6f22fbd4fc53a', class: "brand-shaped-image-wrapper" }, h("div", { key: 'd94d4375f19d9992e8376a209248af0d821d86a6', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '5bd169d99ec295465cd442414254a56c2b2aa556', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '2ea4c3d50109f0295d2795cd1ba14da29222328f', class: "duet-hero-image-mask" }, h("div", { key: '18f68ef6e0bbd4d73ce1d3eab2e909d1fe569dde', class: "duet-hero-image-wrapper" }, h("div", { key: '7173fe4d9704f189673615c5877a9dc292e6e9eb', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '63f757c91f431dffdb8a18ca7629a7340997cfdc', class: "duet-hero-back" }, h("duet-button", { key: '709ec6ccebdb62de70ff4632ac20665ca3286da3', 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: '977499b0e7894eaf4e0f1de7840067efc6b66a20', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'e57d16c5d68419bb308d26d78367d639e833ce60', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '7ddc0c264c1245cb4b11ecef8b055b3c72404c8a', 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: 'e8761243c2d0de7e4a5105e339f2702f6639c87a', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'af16129462c685b876affca73d4013b9448bf53b', 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: 'e0c9f0963d9bcf7d77551afb2a8b1acb53b85258', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '5a51db7d47b79cc0d01b87003bad413ea139e6af', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '98e4c6ea649cba4089ed782f968278a6622e1271', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '45d4b3b6e034a939960a3646c53f6e725a6dd4e9', 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: '364e4e03ab19f541ef4602af615865f17f210066', 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: 'cff0e24f4a4b4272e6a5a6b66536490b63de6dbf' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'dc9fdc50cdfa42d639b3278dcf1b0bb9d17ae0a2', 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: '5ff479166e75d460f603ee928d959bddb4a44dce', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'ea705ceb8a51176d217265edd8a2f76f3a726806', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'b9d587e2e61f76270c94e8ef58562e8cfe0bfa24', 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: '2f6b898a9602d833c8d2cde11ba1287c51ba01d7', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '90e1e86e436e68c1a9410ca6743a2fd875ba276d', 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: '139eabc311c52d61f83ef865bb45dcb857e956c1', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '86a8736f020e2a5744cafb06820469980becd78d', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '182bde149927947501491d1b747d8da9b9c6dbde', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '769173505401a66b7c095d8bf89d2ecbe096d26c', 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: 'cd7db97f12cc48a175dd03da7eba2b20a5802fe9', 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: '743f4dd9f52dc86018e9a77423c2decda8db47ad' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '7160eed21c1700d656830b87f020ae689540a176', 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: 'ffdd779d95a6b7746850be5922544c3393da7b9f', class: "duet-hero-image", style: styles }), h("slot", { key: '01288561e2b13d0c2aea355d0af36b3bef030ac1', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: 'b577acd6ebd8dd68e8cfd6bce02044114ead3dc4', class: "duet-hero-image", style: styles }), h("slot", { key: '064ceca16eab6353c44a273ebb766a544e085667', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,11 +102,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: 'f799d9b64984bb7425692f3ce5202d694a924a92', class: {
+        return (h(Host, { key: '84c42b49ccdbce122db670bd99c0390de4ac152a', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '5ef456ba5f67a6ea5f1d71dda34c39913318b083', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '20eba260f00af16a6b59a0fe9a92b2fbdebeba48', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -115,7 +115,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: 'bd54fe3e7d1f257c2b44f279f48c28000e485d55', "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: '2092b7fff365bcdf2260d992c78e346fed24b3ca', "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.js

@@ -43,24 +43,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '50d5e0a74d44e0dcf9f1b5dc085c62b4042adb89', class: {
+        return (h(Host, { key: '939cedfacbeb6cc0069fdca4c80909580937143f', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '6c92f2936aea122926f889112ba60687ae2ef632', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'a1a8b56fd70b50a147dad1d9811637d086e4ff8d', class: {
+            } }, h("div", { key: '04e36c83cf0d51f536377f6679e455765e98c837', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '316f74d7dbf89cd2da0122cf0c169af3c1abca94', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '904770a407232e39f63f03202725a13865c29077', class: "duet-layout-top-wrapper" }, h("slot", { key: 'e1e1c1e1352822d7b86fdf47070fe2da806dc511', name: "top" })))), h("div", { key: '85fb2026fd9ae01272a94e3f05098b7ded133a58', class: {
+            } }, h("div", { key: '4ab63842f267fca4adadd6bed7c88a5509e6b792', class: "duet-layout-top-wrapper" }, h("slot", { key: 'c512f4e7f30bb6a1e7159a79d3bc24ba05cf3640', name: "top" })))), h("div", { key: '9d6a034aa4a5e0a1c4e5293b2755be1d304be851', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: '5491364fea4dbfa1bcee31f1fecf04bd60726ff5', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '529ef9cfe8b5e807813593125c1fd8782d6c8a12', name: "page-heading" }), h("slot", { key: '88430479dbce9f8b10ed97c186eced6d55ffce1e', name: "main" })), this.hasSidebar && (h("aside", { key: '3498e9926d5037b75037782a2119353fefa48533', class: "duet-sidebar" }, h("div", { key: '59fdb9750ca12eee5e010cabf92d8e8b7d741b85', class: {
+            } }, h("main", { key: '5d98c6a1feb7e641bf95140b957f1c23add97d4e', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '3f321ec210469b09507b8d1f3f457a4486912eba', name: "page-heading" }), h("slot", { key: 'df7d9350f8cfcaadde996fb8507570e80a4b542f', name: "main" })), this.hasSidebar && (h("aside", { key: 'ab2cde3f205725d4e4994aa68a93ab79a5df2b7e', class: "duet-sidebar" }, h("div", { key: '66865fbd9febf8a642c39db1b1f37a915bef1a1a', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: 'b2f1eedd1bc391913f79bcb1891142d2e8cb29f2', name: "sidebar" }))))))));
+            } }, h("slot", { key: '4869dd5a533b2adb3d166e27a81820df7b6a7692', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -120,10 +120,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: 'd2c017f0a20d5d9af1f8c8d543c0ef5521a30d87', class: {
+        return (h(Host, { key: 'bcde4f333a3bd278709dddda0e90ceae4c6a705d', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'a59f97d1ba40abf28a2663dd3c56d9b029ce6a5b', href: this.url, class: {
+            } }, h(Tag, { key: 'ab2c62a98d88a54965ab7be9cc45907e6e07e5d7', 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: '3d8ad265bd32d112f5127ff40b36788839b0dcc1', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '85b387910bee8d7ac0918949bd749266e2450078' })));
+        return (h("dl", { key: '9e004e8a4752dd9ebcb4faf2881a2520823e231b', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'c7678a8d8ad217e33c8c69398cdbe18f23f5fa1d' })));
     }
     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: '906611deb615d294793da802dbd0dd15c4a74d81', class: {
+        return (h(Host, { key: 'dbea429576ed1f52ed1c3fc26b2ad7d235a0a413', 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: '243ef1636898ed14ec321bc12c8bbf1800df4ebb' }, h("slot", { key: '66014a7583312ed88208147fb4cf3a0d148ca64f', name: "label" })), h("dd", { key: 'bb901cdc4f8e5c9366eee9e9e2f5a7f475c8be7c' }, h("slot", { key: 'b4fdf39fabbcd02adde7e3c7c734e5c26c3aa747', name: "value" }))));
+            } }, h("dt", { key: '21f820ef81ada72e006b22a14634b2ba57fe9ce3' }, h("slot", { key: '3650e03253950a189ca684b374220b0edd9f6e37', name: "label" })), h("dd", { key: '9e704a02a57e3d1809b3ee7895ffb554a37e24c0' }, h("slot", { key: '8bd4afe4da261e270cfa9dd2b946946dd4cb12ad', 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: 'ea92e634c52d5d924ade2efdd06b0541cbacebbf', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'f545d7ee648ecf2a199d807c1998e9a8d07f907e', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '8028936edab2ebf0d354511650b7fee94fd47a1a', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'dab66b31a829a45902377e958bda7fc5de27bdf2', 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

@@ -154,14 +154,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: 'a67abb8e30e35b641b31a6891850bc4e00679373' }, h("nav", { key: 'cfe9c209ee35f91942d6a77373656d288ecdaeca', class: {
+        return (h(Host, { key: 'ba51ccb8c54c3fe7671eddff8378534eb0aa4503' }, h("nav", { key: '77477660c912b5e361daedbcf8dce77d85e1fdaa', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c24c3d152b65a65158a379e143114dabb97587a8', class: "top" }), h("div", { key: 'e18c2c08b9d890781ab5007ba2a285efdb33c432', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'c020bdd05d9b5c094e7b7894b5be304a80bbf4fa' }, h("duet-logo", { key: 'ffd006a03dbcb769fb17113c332db7a95e3cff25', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'a25c9bf850a71324fec4f6e9cd292ab9f64bb316', class: "list center", role: "list" }, h("div", { key: '5d4984061763722ade739b5bbb4bdff333a4ad6b', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'e18128bb7e1c57b19f3c44d8d4bd34f9346ff84d', name: "center" }), h("div", { key: '7197c52ee19932cd617d816ed68d00865ca1f67c', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '417e5c9153bfd3a8cadf27066a787622a8bb521e', class: "list right", role: "list" }, h("slot", { key: '97846c76ecffc609c58a37b6bf7fcedab23b8e9a', name: "right" }))), h("div", { key: '80b7d44146a2ac6a4f656e58efc827aefe9800a7', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'b78519eb96e7fce14819a328e80794bdaaeb4614', class: "top" }), h("div", { key: '569571f9f4fea275f14d8cf27bed3d9c9ebaccfe', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '204c1ae8618cfdb39f1e05e23375a10e2872c194' }, h("duet-logo", { key: 'b0175b7ed2254da32ad9495cb1b089d72ad0f3e4', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'a1dfa3d10da3c0f2d0b999dffbd24366d6285128', class: "list center", role: "list" }, h("div", { key: '60d126975451f170fc5c38d1804fff0ac95c3037', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'ea4b5d602de4baf6ebea7142e3d9617eda1c8cff', name: "center" }), h("div", { key: 'd0b27d21ad85f447011cbdde964b255bcb9c1375', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'd7b1e7dbbf01436ab09d792ce9c47736cdc9fe52', class: "list right", role: "list" }, h("slot", { key: 'd0ff87de435ef2a5e3c4f96d6992704957542c84', name: "right" }))), h("div", { key: 'c5ac242c2634edc9c46423f4051d98a47bac300a', 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: 'e819ed52a5dfb139972991a588b6d1f7c8329ddc', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '2a148aaaad2338456e326d74c6fe5f9c2a43291f', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '0f70c9bf0735937ee494cce289b4c7c328004e55', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '5cfdeebb375e5e684b85846a22dcbdb0d643fc95', 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: 'd19c23005cfad3e3dc0edc9bc3023db62cd69df3', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '3dbd6d470cddd5b26277e43720744d83e7f6d3d8' }))));
+            }, "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: '9ad195dc758838b1b924da7c78f1b64f9cee8db6', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c15fb81cfbfaecfad8eb0132b14f5390a301cd29' }))));
     }
     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: '90143154135a9a1af4361a3cca82bc0911c4208e', role: "listitem" }, h("div", { key: '714f90aaa6af1291c71691895c9c6dd0c3573029', class: {
+        return (h(Host, { key: 'b7fd730a9ca29fe66b3fb47968d97882881dc46c', role: "listitem" }, h("div", { key: '8375747f96bce65f0079f3a9e32f597ebfdea259', 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: '955d30fc9ceb744950883b97392628bd50a7bad5', 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: '216c022acdd13b07237e09675ca2a3e5619d8945', 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: 'e196f58875b135d5eb49f08ac179d9f8dac6eb72', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'b2264c9163fb53f2f133ad5aa0eb596bb9dd0d1b', class: "label" }, h("slot", { key: 'eb4890ecf2721cc71c68e678b478e080b25d0148', name: "label" }), h("duet-icon", { key: '331178583e3e1e92d66153fa9760a41d7c1d280e', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '7b6ad09e4b1a4905861f06e3ea7f9ae7185848ca', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '8f871b50abc91e0d0cbe53d7ce94eb975926c893', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '99691e6483647ec36e53d362eb63f67a77c5e86d', class: "label" }, h("slot", { key: 'b875b758547563e0b9f4c64540b8893a06172f87', name: "label" }), h("duet-icon", { key: '241cebbb03717f5a56aaf6299742ef72c4d1d03f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f6e8d54ef1e4cfa3512485a136d52dbe386d0755', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c4f3d4642e2358445b7555c16e605bafc583bcab' })))));
+            } }, h("slot", { key: '059b1fa4eb5ccb1e4adbbb775c4d8cd9c9f2fb93' })))));
     }
     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: '8cd9a7534063729fb56553aceb03dee2a4259298' }, h("a", { key: '4aa5739871a9782b15c5edbbe68c8eb7bd8d72ec', class: {
+        return (h(Host, { key: '6068b6651363acfa5a38ce76f97eef97c617ae40' }, h("a", { key: '7181016d9299aae44bfabcb59504bc1cb839d794', 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: 'aed6c74b178bed00f17f611ffe976d2438639730', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '06b94df84ee2103df212323a25fd7dd457128f13' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'd188538d34c86debcdcea72edb4453b58ce86bb7', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '4dc908e75b92425aa98d33349389a063c96d6417' }))));
     }
     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

@@ -48,11 +48,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'a1df309d1f89c97fafc7c7d89afad06ffac06747', role: "listitem" }, h(TagName, { key: 'befda45ecb5407629b5a79760db503b96020c097', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'df9bbe4dc4bf8f4e51209669b9d338d294a9eeaa', role: "listitem" }, h(TagName, { key: '549949b05fc9290ade7bd94fff4cfbee0bae8f04', target: !this.url ? null : this.external ? "_blank" : "_self", 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.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '9390d6c0d4f0260375d06bd6e8d55641230563f5', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'b31fa79746a8776ae487cc54ebfac1072e1fbe93' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '4afb0788818f5fd04f36da7ca4a7892a1f0aff63', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '2bf91a8c0f70bc9a0a4dff411757e41900c049b7', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '3d72b9e811d6caeb973f5e21ac995d21da6444a6' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '81b25dce0c79f0b71cc832e7ac6da9197c69e1f9', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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: '5e073042b27ed756bd91ed10c229925f7deb370e', role: "listitem" }, h("a", { key: '74d7dca63dcf516b1b284d561eaa14ba5b0c35d2', class: {
+        return (h(Host, { key: '1dc7db637e4e3d95dfde93025a2e7a9b8f9bb800', role: "listitem" }, h("a", { key: '5bf081aadd270657505210b7b12189e6b9abda64', 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: '7db3dfe95be9c9dee6251eb67d77ea7b43a2bd98', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '30be5907568931621210b8f179693cba0c61bba8' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '8a98386d15f2e32cb70769c1b92ac2a92cf124df', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'efd02f3e67a3480cc42cb47b9155983163c35b77' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }