@duetds/components 9.4.2 → 9.5.0

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: '6c2f849981a4d7c83b0980a79e44db7a51d71cc2' }, h("div", { key: 'c3a6f40936c21dbe492f9790c71698f492c82092', class: {
+        return (h(Host, { key: '2c0e0547229b6ad6a7cdc410305fd4410b3e23c5' }, h("div", { key: 'e1ed12bbba8544b1dd2f80aef8d290f01b087a42', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: 'c4dadc943944d9b2501f84c59101d7c8bfa780ba', class: "container" }, h("duet-icon", { key: '328934a3141ec35008240e6e2ca58c2c3d3cf291', 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: 'a12401bf972a3a0eb0817b51286a0448ec4fbdd6' }, h("slot", { key: '87396622c6078253736cbe43a1cac55c6f90754f' })), this.hasAuthorSlot && (h("figcaption", { key: 'c7ecac8d10789ad47a17e795267d8eb584c119f3', class: "author" }, h("span", { key: '169f299b6b65721127a409a51292761b14aa7b78' }, "\u2014 "), h("slot", { key: '38fa9b0ebd195d75dec72b2bbdd5e239dc099f53', name: "author" })))))));
+            } }, h("figure", { key: '1c13c1e60d0eacf6130836b22e40820cd0bcc996', class: "container" }, h("duet-icon", { key: 'd510e6802cb67270d02ad5261719f3fb6c34ab68', 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: '035294078491273c88249b1577a037f28c24ca30' }, h("slot", { key: 'b516e727fc4d435fed30d422ba311099aff70605' })), this.hasAuthorSlot && (h("figcaption", { key: 'ad0b1b81c5dc8cc30136ec2779fb66c428d624ef', class: "author" }, h("span", { key: '4e2c5eb565f7e54f07900a691e2c01c73df22858' }, "\u2014 "), h("slot", { key: '00fcc97851122cdc95659800a0da4c35ffbfa7c1', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -303,7 +303,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: 'f37063c1c2ecee6f4eb47f74012694c6eb944941', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '3460b9ab3ca900f021fe6dc6af90ac8427f6c7e5', class: classes }, h("button", Object.assign({ key: '8fa57c1746f083618d4d4709fa685dbc70dcded5', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: 'fd48b92328f4fdeba76a6523a5aa86b45ad740ed', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '875f64c17c2c540e4c774053a994402957754308', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '4e0c29ccf168b3e0f8564003c094326ff0695412' })))), this.variation === "input" && (h("span", { key: '9f69917e7cc2f33bcf0842342b653a0302e7b188', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '98d020d64882839dad553eaeadd4e39587d6b276', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '375c4df2c400928cec38ed160526aa7e8f483c52', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'e8382d2439f56f61a7219ccc2cbfe5e3b1b16975', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'f7c17cc36818a5e1621421c39e3ea38692cd1e21' })), h("button", { key: '25a649ba24d9279330a2a1d243be81d617f2fe69', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: 'be4f0062c4b924c65101accaa0d156d7c7d3954c', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'b53a71340c36da0290474301a5ab236b675ee881', class: classes }, h("input", Object.assign({ key: '52a7b2d41f97077b0412a67cd01b9d027f8035aa', "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: '30820154c15957181130801c462f1674343e0673', htmlFor: identifier }, this.icon && (h("span", { key: '7c75e8be6a1bb29e24646d7531caa8e251535804', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'cfb4ce296a83a8073d2853f1a2555665434dcc06', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '2a6ea0ea51ce7cda8933e3a74e3c001eeced1d37', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '9aa3af935055abe7847a80fd3569275522b6ef7f' }), this.popupElement && (h("span", { key: '1483c767339e447362361ee3691e660a22277cf2', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'ba8293f1b0f0d1b97e12aacc9d53c9bfd5cfc751', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '55bd9c33a98e6c03542abc48c300159a1e97ed16', class: classes }, h("slot", { key: '45a049c652e9895d7a36d6131c6aeaa98edcd572', name: "input" }), h("label", { key: '793c24a45d8cbfab53d1fac9967849cc86a06a94', htmlFor: identifier }, this.icon && (h("span", { key: 'bd54aa850144b45c57c6a9c0f75c7f6729417850', class: "duet-chip-icon-container" }, h("duet-icon", { key: '2bdfed396d600a5f0da3eccc3de6cbabd41460d4', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'ac3722012743cbe2aa4f612f75cd10c97a0f7d9d', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'bf9d8af5da2754882e7fbe69f193d9b494dfa429' }))))));
+        return (h(Host, { key: 'b1df7c5770002dd9425d26bf8fa17d3721f601d2', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'faa1626d1b3317a950205d14d078fbe0237d7415', class: classes }, h("button", Object.assign({ key: '10cc3c7ffd551371d87683ed1f77ac4e8f26a054', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '09730f09588f700c71c44b5a553e2d9f8697ba23', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '5c24873e683e50fe2638d484259298cda0e787e3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '4b3637344329df9466503eac30a67d349fa182df' })))), this.variation === "input" && (h("span", { key: '110a424cd1b0c929a93150e286aece0d225570c5', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '42b26053fda75b29e3c7cdfa659547142478635a', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '6363c8549b51dd39b76e8f72f57c23450b963923', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '7431ce93955a8cebc8d2f38cee1e7e36ceaee7cf', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'd26a8c7e52b1c4c7f52f82943e8fb678a9350fc2' })), h("button", { key: '1cca88cfde7c8dba8f455140f17ee2aade08cde5', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '9a68ecb75fb3a364875dfd4d641f47c800d0582a', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'c3d47adc6647a5d70ffc49887a300faf937759c4', class: classes }, h("input", Object.assign({ key: 'c557b5098446b6e3cf9b44e6d55b1adb09a5be24', "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: '9dac1a2fca9e959933fda89eef2dd17434e71361', htmlFor: identifier }, this.icon && (h("span", { key: 'ae307754bbdd4907a829e31ee25082463b4f216b', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'cba0d0deff98f3900974e1aa583927ae7747102c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'be2dda983e43069160117f83d20ada5d003e19f8', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '8efc83f4fa6c1960862f001737cc0a382f2e64e1' }), this.popupElement && (h("span", { key: '11d2f0c6552c34208db15624bdcbaa4fb2f4806b', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'fb05d3357ecb174ca39e77473ade54c7a771b5cc', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'b9788ff66787c6ad9f01e0430087cdaf8aaa7419', class: classes }, h("slot", { key: '52e3600944848b6a7fe4bd9b1afb5bb2dfe57909', name: "input" }), h("label", { key: '2f68754b97f21f763ffd59ae5081f661f831ee3a', htmlFor: identifier }, this.icon && (h("span", { key: '45bac9d17f7fd94c8214438175f1980d9f61bf8a', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'f0512358b9ff4ca4f70cf0af9d6b8a4e2c5997b1', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'ccfc7316e3e366ba20a315bac570fd30f68b1bc0', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '0d715c904b0a004fa16467801c598b6b485aea70' }))))));
     }
     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: 'ca4d8a12c903e5b3b1880b8e537028a5120a3481', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'b3bc47aa4bb81f22fa18fa2ed11bd416790f5d74', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '0fd6069ae4f1425ca9c90aaf514e2a9c75e3c62f', class: {
+        return (h(Host, { key: '55c7be96c4af72eca86ca4ac162d8a6437847188', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '63a3a765c707f7167a9ceb051aca670919d11b95', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'a6c403cbd2f31cb9accc560cc8e50c318ec0720b', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '3002be9f9a97b5382377d9888e821ff15d1eb062', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '33bbad5a921fc12b1c1cee9214d15b980c02548e', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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: 'b6781c86d34d4f4b9560b111474a413c954818d2', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '1b59bc43bad54d7ba36951b5fc5cb27c8d197498' }, h("button", { key: '073aa9d20b4f508e991443273c16f43b15577183', class: {
+        return (h(Host, { key: 'b9c815342f0c4635b2bf03cb210c7e71e90b54d8', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '6fb34dc0d618314f3545feae349af2b90669dc38' }, h("button", { key: '2c60976671c564a2ba4c2bae7c25a81d46dd089e', 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: 'b584a9f03de635516bab995166943fbe55139177', class: "duet-collapsible-heading-wrapper" }, h("div", { key: 'ebd0e8c2d793c6eaf9afcfeefde3822025b0f591', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'cb40e56e922d146a4c799d307a36bcb5de2bf909', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '29f73be47a8506407f8e151b103c0d953a175448', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '26c25d0365c8243c7ea36101f6e49743346363bb', part: "duet-collapsible-after-heading" }, h("slot", { key: 'f1a9005c38fd4310d76dfeea3f50a695bb732195', name: "after-heading" })))), this.caption && (h("div", { key: '7d8785de6f4478030bc6422749201f23f3625e3f', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '2f930fc5ca5fb0169c5b16f181ce5b7267ebc4ca', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'fb0d95a53dfa760ec0aa59d2b7e8eab8d9fe5313', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '8df7d36426b0c3390fba071740ca60ddc2ee4931' }))));
+            }, 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: '3b733940731cc46545abc6866c089123cc96ea45', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '4696b9066a27b1ad9786408f13242f4dbca76136', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'af4bef7f00f2755cdd2edb7c0834fbc8b39b928e', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'dae6f5b4438375679e96b8af64596caaeb74dd9f', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '6337a53605fe5692e29ff904314fe66028d4adf5', part: "duet-collapsible-after-heading" }, h("slot", { key: 'fda139a14f821a8b76a567d8eae0e0274bbf5c9f', name: "after-heading" })))), this.caption && (h("div", { key: '46a5a2fab4fd02fa234d593a376b4dd4bce3551b', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '802fa725384a8566be0264ca8d6d59ff02cd76bc', size: "small", margin: "none" }, this.caption))))), h("div", { key: '53cf9e6295a32dbb6aba736c9b8fdfa0239363b1', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '6f5055ecdb2266dfc97f419482bffa151a766317' }))));
     }
     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: '4e145f7fe0409bb47b6ea71c0cf970e436b7a520', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'da28555843c0a763d34c7ddef8727090e373da67', class: {
+        return (h(Host, { key: '7d4179d7cb8c4bb59a1c22c671fbe0e48c76d12f', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '746d78591b5235b00d84d082b96f97d7f3d8ac82', 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: 'e161cae8447cf17c85499d5b8ac46d7eda58172c' }, this.name && (h("duet-heading", { key: '454c6abe2d28decaa07122742bee22e711c3f81b', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '4dfc4f572e57af544c10b32c66e9afb93eac8080', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '96f61bbb0c884d374d10e94bf4aefb0b63adafb0', class: "email" }, h("duet-icon", { key: '2f6608cc7d1e2a2b5da95109823d2e1bab216005', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'd4e80f8aee1fc9997b959e005935fdffafc6dfdb', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '374a1f36f5a62d9888b932000a52a10b63ac7cd4', class: "phone" }, h("duet-icon", { key: '2d3c419e0d321f361a9993116fed27845238801f', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '07d80aaadfd5963717d64d3733d0ae886c71bc6b', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '15123cac72ca836226d307ada922cf2f8544a1d3', class: "call-to-action" }, h("duet-button", { key: 'a254a916c0f5916e8e39f76cae6724b73198d017', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '6c527c0e2c594d19b06fb842c4d8a0967b7f04b6' }), h("slot", { key: '8291bc130ee09e6b1aa1e71bd15ccf6024c7d3c2' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'd92467c574bfe46519683002a9356384e7a91c24' }, this.name && (h("duet-heading", { key: 'e0024d46a8ed78ba623164dc5ba462b243a12e8a', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '569b3e131ac8ef6273ac70656c2d9faaf57079a5', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '99a89137c9e10ef6fd3fb3975edfdf0e014c14b7', class: "email" }, h("duet-icon", { key: '6d8d6e14a74c16381168f384cc785222b0e6a097', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '8dc230b8d3ccc086b61720fb7b6b6645095899a7', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'd796194cecf6deec03d02bab49a0268d553409e6', class: "phone" }, h("duet-icon", { key: 'acffc1fe7f7f50a0e588f8fc3147f28a2fb4c0fc', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '9c1033570e39e0fc68bbe969b7ca2263f92b518c', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '567da157296dc01f1c5818e9fa9a24a95fd7540f', class: "call-to-action" }, h("duet-button", { key: '39f6d00de0bceaec00d73e5eacaf2bbb610832b6', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '657e7d11d3602ee0009e38ef8dde5309566f6406' }), h("slot", { key: '98a6810ad6c915b5825889f058fc9d3a63df040c' }))));
     }
     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: 'b30b45dd5bc6022a8da609883e28a272bf823c6c', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '457f367350cef4ec39f323925e64518b0b5a056f', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '681bb01d1031d8e7cdfac21539f49a9445a22fac', class: "duet-cookie-consent-content" }, h("div", { key: '6bc301cad7c45d36c5d7846bf96abe989a185ef1', class: "expand" }, h("slot", { key: '55da0877e4c6e55b827af651416e6eaeb908c550' })), h("duet-spacer", { key: 'bf00aa77836feb5b8cacbc6c76712e6a3b4aa451', size: "large", direction: "horizontal" }), h("div", { key: '86ed0f3ff48a2c916fa4174417677a6dfa737a0a' }, h("duet-button", { key: '75003f25f1f75e9d40ff2143b4a53441be2ed54f', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (h(Host, { key: '3ce0228a96f65cd1d7e52892ee19e8a1732a40ff', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '24c6d7c27151928edb749a3797f1a8cc5a67be96', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'ed1a82ad8ee72dd7c9a912453faa72ba4e27b3a8', class: "duet-cookie-consent-content" }, h("div", { key: '0233b97bcee86c27e59549df832c91b7f8805eed', class: "expand" }, h("slot", { key: '2b6a7a2356cc18e61e8aafa78d5f17ea01f85c25' })), h("duet-spacer", { key: '4d2dbf87b38a00fee61be0e064fed9ff4958736f', size: "large", direction: "horizontal" }), h("div", { key: '5d12618d329eebcf3d5cd3f9508dcbe2492466b7' }, h("duet-button", { key: 'ea878954d3e7a1616c8c548fbaabe9828b3afa19', 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-divider/duet-divider.js

@@ -22,7 +22,7 @@ export class DuetDivider {
      */
     render() {
         const background = getColorByName(this.color);
-        return (h("div", { key: '419938cb054cda71d1fa4d0de273ecce67debfa7', class: {
+        return (h("div", { key: 'a8ffb4c7ae688f5132e92183c4f1505ae5137b44', 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: '227d54f00e9a51140efcb258a3b9aabd0403e53c' }, h("div", { key: 'ec272041ba4a302da9529e32cd67fc782102a783', class: {
+        return (h(Host, { key: '15bccd2c13aab1465840c9dcc4318b7a112edf7b' }, h("div", { key: '5952a98691e9c06ae16439f6411ae635f61d3db4', class: {
                 "duet-empty-state": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '0a04c1df954274e9e5371101e9756eafacfc803c', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: 'be984ad3dd5092ed1ae6207f72e383cd4398cdc4' }, h("slot", { key: '440fab721d208b694cab78140c322242812e708f' })))));
+            } }, h("duet-icon", { key: '7b46aa60033f7777c3e606baa4d548dfb46d4c9c', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '0e58a4fea54cfd7cab1f5b611e5e076c03ffffe4' }, h("slot", { key: '57378c8bb666cb31a04d0199c910ecf4b49b402f' })))));
     }
     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: '157a9e3785dd0d5d73a7e5e2de69f367a89542a4', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '99df4bd364f76865e2faff62363fd808a48721e5', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'b168d38f9adb462f0f44e4e5d2f4696ca4d7bc10', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '7800fa169b7871195421414bf75c0d919d12bf9b', "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: '068d96c7fc93e8ce64c9e22dd1bcbfe160d34920', id: this.labelId }, h(this.labelHeadingLevel, { key: 'e7cdb11c3979b3cdeebd80b7dc856b97ad037207' }, this.label), this.caption && h("span", { key: '80e0de6c351bc8450455812b961a08c43f0bdf92' }, this.caption)), h("div", { key: 'db529ad1162564e990f7ccbb03fedf4735507c83', class: {
+            } }, h("legend", { key: '5f1926deca424959efcff40befe8779d2077998f', id: this.labelId }, h(this.labelHeadingLevel, { key: '19d831a69931e0b557efff7f2653b23a017c136a' }, this.label), this.caption && h("span", { key: '03daf2a72c3a0bd7d8d52f428c2d26ed3d008bed' }, this.caption)), h("div", { key: '790d7c7ac6f3141415cbe4cfe3a1e5196c354a32', 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: 'a0cc74b7472ca06a305a45924c8e39c945b05243', class: "duet-fieldset-label" }, h("span", { key: '46f40ac902b5e8d166f6673f538b93d7b4126426', "aria-hidden": "true" }, this.label), h("slot", { key: '328d6c4b910ee12d2a3219f863fff82f9df10bb3', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '7ba9fbacf0b68889efe22cb4859b5bd1da3a2667', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '0e83f76e722791658c7c05ac99c9ba8affb52d95', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '81e9a395cd365be7ded540edd8eb68c83a9cc6a0' }), h("span", { key: '007112c1b89077612e5478a1d71ecdbf62ad2b36', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f93d85eb2d47ac6261a6a3cf1367f22c09656f92' }, this.error)))));
+            } }, h("div", { key: 'cde80fe36abae43beaea46abe5f9995f16c04c7c', class: "duet-fieldset-label" }, h("span", { key: '9e67d598f47389ec90534d7899d399dc0558e24e', "aria-hidden": "true" }, this.label), h("slot", { key: '2d427290dc70d8d4f2ab05f03e283bf1cb9cd637', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '4ebecc5ab46bf1b48c6f3b981cfeb3c64de15393', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '9281fb9d06e5e5c359504ca84f1e5f4c4a2f136f', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'e3afdf3b06e81f9eb49ad8a16c5792a3fef7dc86' }), h("span", { key: '97ada7026bc7d9d5c659be4eab71eaa416edab4f', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '35ecd3fbb5810c1e374ebe8d104a28ae475effa3' }, 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: '763537ba02066999a44d5b150b78e695137c94e3' }, h("duet-visually-hidden", { key: '35d3f42318db029c6d554809ecf5ac14088ac89d', "aria-hidden": "true" }, h("input", { key: '14ab29860cfe7da2b3c62da7649a73f6ca33c261', ref: input => {
+        return (h(Host, { key: '10d219682193a77214731256ff8efeb8847762aa' }, h("duet-visually-hidden", { key: '78cf6009458b26f2f0f1bb1db60c850489e45556', "aria-hidden": "true" }, h("input", { key: 'd1ad31afd5645d9ad9cd6b431532a76934812684', 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: '8fd345b0b7ccb794b603dc1fa9164ebf8c495060', class: {
+        return (h("footer", { key: '0239c9d8d627418f97e0ae24abc1c9e2ca47c229', 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: '773caa00c8f629d512537cfab5771e918c78ba57', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '4541d65907daf88fe8fd3c740eabd4bd9ad82307', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '98d1156ad2f44e0d8ab3121ee3db513b82386703', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'ec729eff6008f31125a808b77a97155700a7b480', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '549ec0600b48e174d161cbdfe01544126440da66', class: "footer-top-logo" }, h("duet-logo", { key: '840cb0600e17103f1501cb248b89dd819f7a661e', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '3327e1009bfc9721b5e2529dcc938cc8f4257854', class: "footer-top-right-container" }, h("slot", { key: 'a00901969c97143af27151402579f4ca5c12a84e', name: "info" }), h("div", { key: 'e2e6e62fd027d2b77460546d9ab74f69a9f258bb', class: "footer-top-items" }, this.processedItems &&
+            }, part: "top" }, h("div", { key: '0d5208bde7c1870767a3946cc9b9611585469908', class: "footer-top-logo" }, h("duet-logo", { key: 'e6f83fe8968570abb566d1ed1f7aa9fc2930441e', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'c5c60cb251a4b78d0f5b86820abb813ee2db1f23', class: "footer-top-right-container" }, h("slot", { key: '68ca65194609d5ead28262311b69a4a377f29c5d', name: "info" }), h("div", { key: 'adc5b5c6f8d8fc6127acb6ba6d8a64459621cef5', 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: '288da5793cca9b97494edad50ec731ebdb8cd008', name: "extra" }), h("p", { key: 'd6e5f190770d85f7f23997fb3010940568a11da9', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'd03cd42008101259ae77c5dfadad2fc719c3bc6f', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'abf31941139f2bfcaa290710ce02a3151815d6f5', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '45e583b238584d4f699cf8d80d7e8c77d4204eea' }, 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: '673765574f21e139f2e25c722cf7e3f38fd7b2d3', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '92391739f41ed1b88eb34ebd22bbdd1a6b94a5e3', name: "extra" }), h("p", { key: '692485bfd3c550e5abd173b358cf7ec18ec49a3e', class: "duet-footer-menu", part: "menu" }, h("span", { key: '074f786140a2219127a987881cbce05045c150b8', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '95e7b17c83d7994ec0ae75e710a39900f1f7dfad', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '78e702876e88b1f4b0e2edcf09e06154f601824b' }, 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: '716654a0bdebdb4b395c0cd1dafbfcbea17d69eb', 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

@@ -19,6 +19,7 @@ export class DuetHeading {
         this.theme = "";
         this.hyphenate = false;
         this.fixedSize = false;
+        this.accessibleLabel = undefined;
     }
     /**
      * Component lifecycle events.
@@ -33,7 +34,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: '9a91dd0a097a00c6412b6b759df13aaa814430e8', class: {
+        return (h(TagName, { key: 'fc35d12a14663418e76f8e17d41efd7fa1990638', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -44,7 +45,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, style: { color }, part: "duet-heading" }, h("slot", { key: '01f466dbadd345dac83e12dea63809ad46a70f2b' })));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: 'a6f73f221a78d15399456b9d861906f806725228' })));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -274,6 +275,25 @@ export class DuetHeading {
                 "attribute": "fixed-size",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds aria-label for the heading. It is important to note that this overrides the heading's text content for\nscreen readers. Usually the same content should be provided for all users. Use this attribute only in specisl\ncircumstances when an accessibility specialist instructs to do so."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-label",
+                "reflect": false
             }
         };
     }

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

@@ -158,7 +158,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'c35513eb060ccad4d0be7152579a8c1ef1843ce7', role: "region", class: {
+        return (h("div", { key: '7fc47bf02cf2ba5cc2f33ff49bcf333743275049', 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: '27e85adc78bb62294cbb7d9dc59a8444bee27e5e', class: "background-area" }, h("div", { key: '181d77ba32e718bf11e087391ebec1de91a0f436', class: "background-container" }, h("div", { key: '4a83099c17f49e81652b150776eb96cf030f13ca', class: "background" }, h("img", { key: '6a7248c64c31e24f90145362bb9f846c91bf8375', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'b4eb38ad6851945f2d29b24329ba465a0c0563a2', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'cc3cb69b3e1f33c09eb1017af5c2d373f03b68ec', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'd6965e50c72e29e3503d5308a0ff7fa8770607c2', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '2a124e12ce9cce7f1d581c787f5006ce7403dfd4', class: { background: true, [this.layout]: true } }, h("div", { key: '2bd79bb7fadcca8400f1133e05d4b4193eadcf9d', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '39e6fb6705c3799d1b09b5ad2ea0f637926cfa19', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '3177707b2a5c89884edf3ab2bb2951f56871532b', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'e1059a46a707b5f23a2963bf1006d80f348ac57a', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'f049418b2d2d39e7d69181d3780a8683002ed844', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '429e6ca56f295e1a3e04209a473a8c7ca07ca127', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'a324ce3be8d51d6848bf82609a8443b637f7c7e9', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '20ced3a9311746eb034ba4efba7cdb0176157dd1', class: "background-area" }, h("div", { key: 'a6d3a68bb41519b1924f59fd4ad03159af93a582', class: "background" }, h("div", { key: '6f96b2049aec609732afe98450ec5f3e7022e9b1', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '72e6e5d2e797abaf09dd722327fb5bdba7715b44', class: "brand-shape" }), h("div", { key: '21a64cef40034dd82aea23a2480fc7a5ef223f55', class: "brand-shaped-image" }, h("div", { key: '7c3e55707f87964db8ea0917b74d253c9d695abc', class: "brand-shaped-image-wrapper" }, h("div", { key: '895025e62003249bc64ea166629961963d81e88a', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '0e72a22d7b52754a6ce5f31a4add3f6704079b5b', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '28eaa864dab07e83921548498cfd9290fedacc34', class: "duet-hero-image-mask" }, h("div", { key: 'f7205d85c99bf061e83559976c132ac0a079591a', class: "duet-hero-image-wrapper" }, h("div", { key: '12b774da3703ea05be8f8d53476af5704d0fe2c4', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'd1421d7dc9f15977eba7c662979bb871d495a98f', class: "duet-hero-back" }, h("duet-button", { key: 'e24850de6b220e820248e612bb64fbc94c4fdc99', 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: '027155027be1fed9a7d604115d6cbf17d469784f', class: "background-area" }, h("div", { key: '50da22f0391f62fa7908ca1dde5f0d3811051e3c', class: "background-container" }, h("div", { key: 'f8d0e012065ad50a71b83b58d2803e72e362220b', class: "background" }, h("img", { key: '0ce16bfa321211483792484b28452eeb01f10ab0', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'b3ed40e5ee0d1c2eff55c802cea26926c5b5c4a4', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'a8f5380a004ccd14380113b51fbdae26aa48954b', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '6730e1f397006ff742abbaa6427967dba8fa84df', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '7634d6dcebde7cae44467a54f7a8694f113ad2c0', class: { background: true, [this.layout]: true } }, h("div", { key: 'e76b7db5ea6705834dc2227b5f61c55f035e2541', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '1fe3f40e033535c4aea637a04a707044d1ca4725', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'b6530997d59934dbe48d900439bd90446663d33e', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '7a5a3487ca172144d6640aeb6d84479daeaf5adb', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '29fe4aaa5e5d9657cfb16a19ed6c31984db541e0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'eb0c71c578dc20f7969e35cf6ee01fbc171b858b', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'c82c2c9ada8ffb8b59e4709267d3ac23640e1d10', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'a0bccb8efc399c63a4e86f1e1937d1ea2f71464f', class: "background-area" }, h("div", { key: '94fbd4c735f15af824e3297ad7de803b2061cec3', class: "background" }, h("div", { key: 'ac7124cbfa8990d2beb003d0bd715b5b80df52cc', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'b72cdbdbd41cc07a87787a2dfab5a9dd706044b5', class: "brand-shape" }), h("div", { key: 'e366068120a1dd8666b60470e6a75937a0cbdf0c', class: "brand-shaped-image" }, h("div", { key: '6ed547b25f4df9f78e29d89781c072c3106d121e', class: "brand-shaped-image-wrapper" }, h("div", { key: '29b9be6046fbe1aa14c3dcf11f45fb5ee82f123e', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '9a910213a30875c026f8a8250f4c750c5084684b', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '005129885fa908c00635dbe6db3f50ead8e424f6', class: "duet-hero-image-mask" }, h("div", { key: 'a231ebb9a646dff22ff2ffb8edf412c137bfa0d4', class: "duet-hero-image-wrapper" }, h("div", { key: '401ab6dac2cc004f7c8384640b8ce333dd02b32b', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '4d9a74443e2d7d58a8e2c5fbf5fa76913c32a1fd', class: "duet-hero-back" }, h("duet-button", { key: '229f71142d441bf3e49b7ab650c46e923fdc4b31', 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: 'b077407e1c34a48740ce354c5481dac73b654e3d', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '631a6b29fe9919cf69720cb81573e801dd36d99b', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '92b822dc6914886aab5ae1b0528fc285695c0be2', 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: '3216721c8773b44c4f3d8635fe5eea31ba9489a7', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '75e19684ffefb463170efcc7067969e952099230', 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: '9b7567102fe9d70e1bc20806cd1a953c2330e731', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'da172940a007cfa192370d8c268bcbf88e0950d6', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'bcd14cbbda4449532fd26b2233706371d362558d', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'e79783580f4c322fb7d0ba7851d25e15f785f5dc', 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: '8c03af3ace34f2f0b1138e9a32f7ce01515fbd36', 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: '2fd60c758679df458ef2feed22817bf1e932446f' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'ee562f5589037be7d2de3491c62de4795cd00d66', 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: '394173c6a3790c12f933749c5d3d431c03c66a93', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '7aca29154e6e696454b23e350ba837cb3306e9b0', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'e69d457cde95f1e299f5c5a4950772e84a55da81', 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: '89fee6188b91405f4f830ac18601540ace504694', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '50e1711f9a80fe95d2224f574b92bde5abc04c7e', 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: 'ccb9034eaf3121b01230e4957fdcf5c2a7cf03db', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '46912375d84115a602ed2e6cd9da2a1a51d0553d', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '95d009ad1bf8553becef11b3b8894b665dae0af3', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '61f9a7eb5006ab577c6fb3bead189355afeae32e', 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: '8fbba708dc8ff9e6094a61334b9ca7705e8decd3', 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: '57645d2a7a0950cf03aef608dfaf4a67bfbebbdc' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '6712f9bd53ce7a5454751d84880f2127dafe9cfd', 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: 'a1d05e33342d55d19db68851c3bd6109aff70182', class: "duet-hero-image", style: styles }), h("slot", { key: '04f905e4192d1b6542d830398f024b04ed0fe521', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '0b01b76687b810f020251e813c5cd9cfe7cc1d0e', class: "duet-hero-image", style: styles }), h("slot", { key: 'a61e7ebcbb366aaa17f9dc427ddb4b072cb03c41', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,11 +97,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '2c8d063e4f6194f02c63a231c7905ce4477ebefe', class: {
+        return (h(Host, { key: '776dcedf38f8369f2a3dd22910b86c80c25155a8', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '9d9b159d2531f6269a434a617d95533d65a33fff', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: 'e08e1f123f360833978105629283f56a3d55ee15', "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: 'ca9fce62fea6508b49944defe645c230de66b14f', "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: '5e1d19fc1682d3d428dd2f49a867e120ff9ad45c', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -377,11 +377,13 @@ duet-caption:not(:last-of-type) {
   width: 100%;
 }
 
-.duet-input-variation-button {
+.duet-input-variation-button,
+.duet-input-variation-button-left {
   position: relative;
   width: 100%;
 }
-.duet-input-variation-button .duet-input-relative {
+.duet-input-variation-button .duet-input-relative,
+.duet-input-variation-button-left .duet-input-relative {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -390,16 +392,45 @@ duet-caption:not(:last-of-type) {
   justify-content: flex-start;
   width: auto;
 }
-.duet-input-variation-button .duet-input-relative duet-button {
+.duet-input-variation-button .duet-input-relative duet-button,
+.duet-input-variation-button-left .duet-input-relative duet-button {
   z-index: 250;
   margin-bottom: 0;
 }
+
+.duet-input-variation-button-left .duet-input-relative {
+  border-radius: 4px;
+}
+.duet-input-variation-button-left.has-focus .duet-input-relative {
+  border-color: rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px #0077b3 !important;
+}
+.duet-input-variation-button-left.duet-theme-turva.has-focus .duet-input-relative {
+  border-color: rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px #171c3a !important;
+}
+.duet-input-variation-button-left:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #909599;
+}
+.duet-input-variation-button-left.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #747475;
+}
+.duet-input-variation-button-left .duet-input:focus, .duet-input-variation-button-left .duet-input:hover:not(.disabled) {
+  box-shadow: none !important;
+}
+
 .duet-input-variation-button .duet-input-relative .duet-input {
   border-right-width: 0 !important;
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
 
+.duet-input-variation-button-left .duet-input-relative .duet-input {
+  border-left-width: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
 .duet-input-variation-revealable {
   position: relative;
   width: 100%;

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

@@ -445,7 +445,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" })), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" })), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { name: "button-left" }), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -980,7 +980,7 @@ export class DuetInput {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetVariationType",
-                    "resolved": "\"button\" | \"default\" | \"revealable\"",
+                    "resolved": "\"button\" | \"button-left\" | \"default\" | \"revealable\"",
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
@@ -993,7 +993,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation of button. Use \"button\" to render a button element next to the input. Use \"revealable\" to render a button that reveals the password."
+                    "text": "Variation of button. Use \"button\" to render a button element next to the input, \"button-left\" to render a button on\nthe left edge of the input, and \"revealable\" to render a button that reveals the password."
                 },
                 "getter": false,
                 "setter": false,
@@ -1248,7 +1248,7 @@ export class DuetInput {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputComponentType",
-                    "resolved": "\"date\" | \"input\" | \"number\"",
+                    "resolved": "\"date\" | \"input\" | \"number\" | \"phone\"",
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",

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: '77e2f191178d05f54711416debb0c7f64780a0fd', class: {
+        return (h(Host, { key: '80c12f757fb1c4bf5445c7617d1892dd1aa8eb0d', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '905dcf1de42b34427d89e098f157126507d12aa5', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'aff4d94915e6db5fec05f1591702ddf5d32309b8', class: {
+            } }, h("div", { key: '81afc5eb022aacc3bf55f0d7ba58002290a3a2dd', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '2d48af138c05b1bfbf816ba62afe9fd409d9f74b', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: 'e9a78a2f90f64572d0f9eb0095696f7292231b90', class: "duet-layout-top-wrapper" }, h("slot", { key: '5c8632796fc97f96a9db17cb193730d394d63bc6', name: "top" })))), h("div", { key: '7e0243ab692a0f95ae46a7f41afaac27ab6f8c2f', class: {
+            } }, h("div", { key: '857faa5737328c10aa87c41fbc8f6076877d9ba1', class: "duet-layout-top-wrapper" }, h("slot", { key: '75876d2b39ff260c65420eddba4194a661bf0c4a', name: "top" })))), h("div", { key: 'a9d25df347b7e011438c99ccc489d3b410610624', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'e0eb98840d79da68f19c18dfb6b0b738c50a8563', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'a8dc3953ae2de7c4d6cdfb7b732a0a2f6ff59ba8', name: "page-heading" }), h("slot", { key: '9dc9657dba0718b7553aa79d2ba525fdfeb14279', name: "main" })), this.hasSidebar && (h("aside", { key: '2ca95869b0244da856be5a537d4781fcba395eda', class: "duet-sidebar" }, h("div", { key: '63c6ea53fff4a0f22940410c70619ce468179c20', class: {
+            } }, h("main", { key: '936f850f1165c8b853fce05c0a7ddd893d7a3e33', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '2aef8f0058038a3a55c89c240726d7766a4783a3', name: "page-heading" }), h("slot", { key: '6f04a6b39bcf239c2e7d09049e8949247b80361d', name: "main" })), this.hasSidebar && (h("aside", { key: '2dbb3af225bedfa47296eb2cd946fcb20ca9fe94', class: "duet-sidebar" }, h("div", { key: '7ee757a5e3ecc82c89559ff426ae848366ec683e', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '7329e6f47779d50e1ce873a0bb93e67b3a5cdcfb', name: "sidebar" }))))))));
+            } }, h("slot", { key: '4f566a10f4c4e366deb04c43de70358f6df09ec4', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,10 +106,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '70bc31e1d10efda3453e16b689e38d3a4834a4bc', class: {
+        return (h(Host, { key: 'f3e90c99efca22219ff8ebd0a2c5bced2b833798', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '1989da3829486cf23e4a50a7e36d93156f816404', href: this.url, class: {
+            } }, h(Tag, { key: '736b53ab41312fd62f6701294d8228f4cc2a54be', 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: 'fb75b5a512a993e8478f5c82e38b8b82a5e199cc', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'b8c6ed37ea89e194ef5a2f9fb603b60cd204ff69' })));
+        return (h("dl", { key: '7db97f4b853a8c566565c13d19c6699cb61aa0f1', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '9def9a838232a96dc345c2fdaa72ad1bf0cf773c' })));
     }
     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: '22e6cfe329bfdf6f2f1c374bbf9bf9ab79241c52', class: {
+        return (h(Host, { key: '7d5edc9fc5a6204321bde53375110cb79bf4cc5a', 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: 'ac210602fa781f3a400b0268c29612b3feda2882' }, h("slot", { key: '3e79d41cc7272db352845896debfd271df16fb70', name: "label" })), h("dd", { key: '441336e69ff97fb2b7b94e19ce909b7936bc9519' }, h("slot", { key: '884a75fd16b595aaf8ca7aeaec1d345e2760e4b4', name: "value" }))));
+            } }, h("dt", { key: '98639d5240ed7adaba681680719ae58994ec15f5' }, h("slot", { key: 'd8f9358d2665d96c121786911152df7352b6fc46', name: "label" })), h("dd", { key: '5edaa517ab825259c299f647e1f7023ec7cd5fa7' }, h("slot", { key: '0c0693a642e6bbd8e075f804a4b93067ebc77699', 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: 'cf1b972f91235031706d26f97708213a8f7a2f8e', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'a88838e36a8db0445b441e1e5a18239e70f91672', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: 'cd8e66cfc274e3f41172ef96b07880d49099714b', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '4440c702c9c89c8ff2f94146c02849f04f5e055f', 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",