@duetds/components 10.6.0 → 10.7.0

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

@@ -130,6 +130,11 @@ export class DuetHero {
          * Image position.
          */
         this.imagePosition = "auto";
+        /**
+         * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to
+         * "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        this.imagePriority = "high";
         /**
          * Style variation of the hero area.
          */
@@ -243,9 +248,9 @@ export class DuetHero {
             img: {
                 src: this.image,
                 alt: this.imageAlt || "",
-                loading: "lazy",
+                loading: this.imagePriority === "low" ? "lazy" : "eager",
+                fetchpriority: this.imagePriority,
                 class: className || "",
-                role: this.imageAlt ? undefined : "presentation",
             },
             sources: parsePossibleJSON(this.sources),
         });
@@ -285,7 +290,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'ff8e73f82eb8aad28667e16e49d362f57fcd3b74', role: "region", class: {
+        return (h("div", { key: 'dfdf7ff48804ea8afc843f2901dae041929c9266', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -303,17 +308,17 @@ export class DuetHero {
                 "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
                 "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '7c6eaf498e1c5f42601f4c77a59d04f4e11c3787', class: "background-area" }, h("div", { key: 'a1cac74e5f880d8d7dd2d8f2fde6a6989769cbe2', class: "background-container" }, h("div", { key: 'f7819b590a7d01d66cb3ec2daa6667cc6a066993', class: "background" }, h(DuetPicture, Object.assign({ key: '554157cf62913f6fcbead29527d23678e952ce9e' }, getPictureSource(imageClass)))), h("div", { key: 'cd6031dacba217d040ad59474be4af621a76e463', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '08bbfc431301d26e2dee3c4e5bf2437c6bbe8052', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '2458dfef535c7278b6b703001e66d9fedef43aac', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '57b5c3ddecbc91ef48071c8050eaaa82599d1822', class: { background: true, [this.layout]: true } }, h("div", { key: 'b84d8bb2ebcabf13dc9c258513423327021dbd83', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '1f899edfda9e0b827c28f83b286b8fde47a1079f', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '67b34ed24606ef237036bf322d644e993415bf8f', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '95e326d93e23f615c90b18c61e7a30e30c84ebb1', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'add5e271482d65053646ae3f6ff4c413a8e114c3', class: { "brand-shaped-image-bg": true, [this.layout]: true } }, h(DuetPicture, Object.assign({ key: '00d4e688381f2758688008ce19e872ede3452cbc' }, getPictureSource()))))), this.categoryIcon && (h("div", { key: 'a5651e24522d86a6b0d1d870a5d700fad9db74ba', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '0b35409d56e5842de0100f52e54f99561e777404', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '0fa8f2031fe9a05cbfae9f1df5b73afbe156e840', class: "background-area" }, h("div", { key: '2fb9fe1b29056b9e257f8e8079f2872c2ae4ef93', class: "background" }, h("div", { key: 'd4d20034ae7773baf2fdd1551b83711cc2b0b781', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '5ccc852b8b469c952800bac5c02489fc60ee8433', class: "brand-shape" }), h("div", { key: '73d5610a1e0ca8331908ce011976b86d62fbe60e', class: "brand-shaped-image" }, h("div", { key: '84079f98df920d86c3f6257f97d470ff1ff10d2b', class: "brand-shaped-image-wrapper" }, h("div", { key: 'a5d34d656f4d4f208d6dda010fb9c2236559d1e0', class: "brand-shaped-image-bg" }, h(DuetPicture, Object.assign({ key: '900a632f43c338d491fa7bd2104b51c27b9ec814' }, getPictureSource())))))))), h("div", { key: '62a03b483feb3ed3639d3754515456b058161877', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'ba372654336abc15cfa19bf95e32eb2c629bacfc', class: "duet-hero-image-mask" }, h("div", { key: '258446935eb244a6cef5559d64bc3c486bf46643', class: "duet-hero-image-wrapper" }, h("div", { key: '726d6c0f7fd9915f813b5f7e57a9fd093a7640d2', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: 'e1a272326833f3eea3209265b7c17d4f581812dc' }, getPictureSource(imageClass))))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'bed23c4fdf4e2c6869bd519aaefe2fb95231eb76', class: "duet-hero-back" }, h("duet-button", { key: 'efa5d21d8bd40aa5dcca5aec05b7ddb883898cbf', 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: '38e648e7447b8db00a773ff4025d68500401f7bc', class: "background-area" }, h("div", { key: '803534bf55dc7737cd41ec1d75fbed052334a19a', class: "background-container" }, h("div", { key: '27d0577a3993d7eaa767812700ff290986535b20', class: "background" }, h(DuetPicture, Object.assign({ key: '6cc4a5648f7466ed44125cd22e35a6eeb725b18a' }, getPictureSource(imageClass)))), h("div", { key: '76a95c713cd90761ea2d670389183e2c04a97a80', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'c436973c44f7d497a70a96a51eb0f96be6eda95a', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'e5a17290d952644ba521a4b3976387456f650cd4', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '8fdf828e65411a86393e096d8f3b6415076d97e0', class: { background: true, [this.layout]: true } }, h("div", { key: '0ada9a2b55d78b2774063d099cb03a8e09693584', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'b24d91804b31920da022285d0565667c8e92997e', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '226619d3d283b31fa7e8caadaf49473a170abb3a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '0a0415ca70e98b277bf151f28e1f4f1639338fa6', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'c866eb1fa36ab6cc43e8839669069046c2faae60', class: { "brand-shaped-image-bg": true, [this.layout]: true } }, h(DuetPicture, Object.assign({ key: 'a98b41e51c70043f55128a19718911f321b7527f' }, getPictureSource()))))), this.categoryIcon && (h("div", { key: '0d3b0c0428a32d2df977a6ac63be04ed6a7f72c6', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '7af6dee3ca69df4b1d8e87830636ec18ad3a40b7', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '20bd7ce2aca1d5062f0f0e1f4889a97ec308b1d9', class: "background-area" }, h("div", { key: '1847e876158decc257b4445501d1bb8e208ddb0e', class: "background" }, h("div", { key: '236489bc1fff1be4cf44d267dfbb5c3bcb119dad', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '3c1e73a037c1ec3b129caaac2a689bf60ce62710', class: "brand-shape" }), h("div", { key: '9cfc2c3b6f5022d863fd6c869ffda7e0df51e013', class: "brand-shaped-image" }, h("div", { key: '8471e4f399016fb37f5f5e46f8bab0865179c6a3', class: "brand-shaped-image-wrapper" }, h("div", { key: '68bfcd1b748c5f7d0b3661152a489707f12024ac', class: "brand-shaped-image-bg" }, h(DuetPicture, Object.assign({ key: '78a267d0198018669353675e01ad0ca70491b36f' }, getPictureSource())))))))), h("div", { key: '4ab0bf9e9dee5b6889db6cc396cd304eda1bd870', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '208c46264f1ea0ce04845324a68cf5848ad95535', class: "duet-hero-image-mask" }, h("div", { key: 'b95a0b0a8840c5835a4e9668bd9481fcd9bfa87b', class: "duet-hero-image-wrapper" }, h("div", { key: '04633cc8d3020b921c42551a5e065bc942540fcc', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: '7415ca53535a1295d42eb2b29cc6dbe7a93a04ae' }, getPictureSource(imageClass))))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '59cbdb9c4195074e03310b65a88b4bafd74f9916', class: "duet-hero-back" }, h("duet-button", { key: 'ce17a681e39b9ad5c21edec2472175919f68b02f', 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: '7de90656859d63499f3b160c2a39619cd4a0a9db', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '73b543bd71d7e1f2936a2753a255d1ac1339f99c', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'd0150811990feac24531dc5e173a93ec3a482418', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '041cf2cfcba43317f1e0041d40b00bfd68bb6202', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '7f662d3f98757953d04cb29640a7284e7ddcb64b', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '1c02aada316e7b8f8699b79d1128476cdde75ae6', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '34c786a2833cbeb54018fa83b543ab7c55ecd5ff', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '28a82b3619a9418271f1dd4f25d10366fde9f753', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '4508f7e305d64e5bf7b39f5340efe8b2ab9d12be', 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: '3fb36dbf926c3331c6d757bc32208f26424f7e9c', 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: '85fd506d92b185ddbb57c134298164422a6c682d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '9230b5c71616b04e276724e18592d946f7e4ad5d', 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: '191763dfcef22bcd3ccd7b8ac096ae6446de2d98', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '7ee11a778839f281ce31673e60f4923ff223e3ac', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '7d7f43ba3e592cbad30f8f28000ff361209bf443', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'e73727e5aa7fad6aaaceabcf6f81c6572f0a15a9', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '5884aecc75704d8dccc6c709a6768ddd578c4dde', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '763778e5026dbfa90ef3e68f0f1b7d037043b88d', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '9588038687bc9dfcb10a04b5e5cdaa6e3ef253de', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'f0d60545403dfcc453d79aa1bfdd5582b876ae49', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '7006a276c36ca7001df5c93d6fc3e792f8a07169', 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: '2954e77b3dde7b49573c25f1566d5f820c1dea3b', 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: '87703efb26e4376a71a692aa444988dacbf45d68' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '92123389406d8b37e76d0305fb7a2e1d194ce1d4', 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: 'cfe495f2a5bedb9bd622b3a001533a299477f12d', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: '26f3df199d16a059b273c5e8dc568c71ac637d05' }, getPictureSource(imageClass))))), h("slot", { key: 'f8680df361205e9c4f2868f71022e736097002b1', name: "bottom" }))));
+            this.variation !== "content" && (h("div", { key: 'cd09b6b83414a647857f014ddd08f9b49b4d122a', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: '68b91f0d9db476f3aa31c63b2a04465705e61658' }, getPictureSource(imageClass))))), h("slot", { key: '8f23feb29e40591b85303a1864fb5736274b7596', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -878,6 +883,26 @@ export class DuetHero {
                 "setter": false,
                 "reflect": false
             },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"high\""
+            },
             "sources": {
                 "type": "string",
                 "attribute": "sources",

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

@@ -144,11 +144,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: 'ac454937867acd98e1552f998f09cecb7b6db6f6', class: {
+        return (h(Host, { key: '4165c86903dae730023be910be36389c7151045d', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '61bd9c9b857bd54bfa18b71035af646ddfc8b490', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '9efda9e15441290db9c499f59fc3f4feed86e5b2', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '513e30e9f69a6661e54b5f2a0989eaf14887f533', "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: 'a59c6e8741e859747f51863e7677de1f95e71b29', "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-link/duet-link.js

@@ -187,10 +187,10 @@ export class DuetLink {
         const Tag = !this.url && this.variation !== "default" ? "button" : "a";
         const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: '07cf184d2f321700e665e358f8a0cb988e798da8', class: {
+        return (h(Host, { key: '1cac563de2598ea4f66a666a8e9ba85d74ef4d29', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'bb416240f5adc73c8eeacbd4ca0524619326a954', href: this.url, class: {
+            } }, h(Tag, { key: '0ff450feb862488c1bfaf626a234559904f301a1', 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-item/duet-list-item.js

@@ -34,7 +34,7 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '83029afa5ebc666926eb1572b8ad9a311bdbfcf1', class: {
+        return (h(Host, { key: 'b7809fbe9217be4d6986d8124e5d6739e8e5c506', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
@@ -42,7 +42,7 @@ export class DuetListItem {
                 "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: '884936458d12b95cd553cd4dc4d8a237cd8e5830' }, h("slot", { key: 'b17473caf7b410acf49f8c68f9ae53b3071397d7', name: "label" })), h("dd", { key: 'e5c6aa8b8d8998d500d27493896a288f71861df6' }, h("slot", { key: '7a6a3b223c394bb3376d7734791cfd439076d5f7', name: "value" }))));
+            } }, h("dt", { key: 'b359df218ae6b2e1240b125d8d81a3555f57b33f' }, h("slot", { key: '778f57296c84f300810462d15a42eeed8a1ac03a', name: "label" })), h("dd", { key: 'f28fc64caa353dbc6e042a094ebad697146a0ffa' }, h("slot", { key: '734ef1bfe403082bc681b151d842e45c4341d3cb', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,10 +49,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e826fdb0b0fb223aea52738971ddbc17f6004833', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '350dd3a06df24d5f3a3f3dccb4a4a48b4a43e9f7', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: 'c3137b7868b438a2d3f0769ecfcd876c39b6b762', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '2a1b919990d487b374479d4d71ab1ab271c52d63', 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: '96911d1ad50d5b247e27d3e6b5712326434a6354', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '004e73cb6a5e6f3126a45d9fa7184f7b424d4f60' }))));
+            }, "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: 'ccf0897bfd45251012c0e9f66d492cd2c51521f8', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '1d5c21e0880c7cac3313ada7623ba81e2eea9bdf' }))));
     }
     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

@@ -62,17 +62,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a8e5a338b3e99161819aca174ed5d7390adcd508', role: "listitem" }, h("div", { key: '3515f7355c3f564bdebbea9a7d1845754ad9d3ce', class: {
+        return (h(Host, { key: '7c841d8d215853a62a92f5730eed29b2b7552e5f', role: "listitem" }, h("div", { key: '7021c554d6aafa114e225ebd328c9d1aa400a82f', 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: '8ae1babb7852048ac222167858eeb10f2ef8a3ee', 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: 'ed8b6ec296f51a222f37a11a9f979df8efb83525', 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: '2d22eaa31070fc91119b0d15fcae8768764b3038', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'fa891196c7c3247a4349fc5db8d59e0500754cb9', class: "label" }, h("slot", { key: '59a1658b0e39bae2f94b8583e7ce787118f13221', name: "label" }), h("duet-icon", { key: '31da6e0c50072b0411a7e9c69d79aa810963d0b8', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '9490db9c65cf17be947333aed8562e5a146da13e', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '0cb68c07d1b89f968757595fde07aff18be326a3', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '014d839c7407fe48b8139e8d5b4b61fff7e2f9de', class: "label" }, h("slot", { key: '45f00327bfdb72f879469ef815cf73f044d331d0', name: "label" }), h("duet-icon", { key: 'fc550998f3a736271007766634b153838849de45', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'fbb77489a38cdd3c7e6edb70659898600db01a14', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '31a887188bb39ed4efbe1383940b3b8db7396102' })))));
+            } }, h("slot", { key: 'f943770b922349bf805d0aaaadf47e70d0db10d4' })))));
     }
     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

@@ -48,11 +48,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9321ae6f770fbc1b00cde317df160db1d32fc53a' }, h("a", { key: '85ef5b95cffcae577699f0a3453b0c3fd24d50e9', class: {
+        return (h(Host, { key: '9aec16ee648442b0ffb731e612cc0a051f849e06' }, h("a", { key: 'a879395faece3c5211eea56c497c45908969889d', 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: '374d983fce34f87bf8c7878ede20b9fae712b8cc', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '26ababe0542732c2fc589340dda968e3bc574caa' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '2e6bed63404ffa961753c38929f9726240d8daf2', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'eecdd8e7217d2eaf1d08438b17a18a3a377b8332' }))));
     }
     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

@@ -71,11 +71,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: '19ec1a0c3d191845df0ae30cdb8f9b83c198b79b', role: "listitem" }, h(TagName, { key: '85786500b66990fe9eee940a466ab9cd08eb2103', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '132d5bd2465b0d1d847c544579ff69c5229faf9a', role: "listitem" }, h(TagName, { key: '486539812ce02259d1ee5e1366aa019371e59e5c', 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: 'ba8faece0464d006590733c1ff8437cdd931ca03', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '80207075bb856dbfecb6a91e0a72b13287751da4' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '7e04921588a4c306f61b8056c7c0a7b83c2c29f8', 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: '9b6d8d303debd7037dde3c8af5780e937a180ed9', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'd7a37a3a78860c03d9d0876f29382dbb066accf1' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'd0d12aa8778d8be71cb4323758932176c6fb48c7', 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

@@ -33,11 +33,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ed2a24c6bdd70f91370a4a70bf22804ce698ca49', role: "listitem" }, h("a", { key: 'f957e2da0344bdd58789bb90151c23b341824d93', class: {
+        return (h(Host, { key: '858334fb783a2f4df99678148750056417235872', role: "listitem" }, h("a", { key: '7429380cb4dd0764af78fb92f6036edcbc503fcb', 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: 'c6f7c0a4fbc065c7ff132dba57ec468036359582', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '73100c0c85e3087896e81c526816b1e92d13b9c3' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'cbcbea291b31e18a928e0bc5ba3d9fade0a5be18', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'e3bdab3464edebc3009bb50436c82a94700b68e6' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5d770ae8af90d4342a6a057ece21ada25ba64f63' }, h("div", { key: 'fe2a1611fec8c6a234c25a13e24d732cc0cf4511', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'c7bad3186de463ebf1a3b1411b299cf59f16df0b' }), h("slot", { key: '77e0e221d53ce3d3addf52cdbfe06e5fa55b38b3', name: "mobile" }), h("slot", { key: '691b0c5b905950d7218633ffedc1094e7b1e7946', name: "desktop" }))));
+        return (h(Host, { key: 'cfe229a2c9358cf42d3de731743f9294662d104f' }, h("div", { key: 'aa379a4209ebe14ffd066b760e1649bf1e70d5de', class: { container: true, sticky: this.sticky } }, h("slot", { key: '75a8a41301126ff2702908d3d60077afc8dd466f' }), h("slot", { key: '5c2b378bc0a9258e1e6de5776b5395cdbfeb4625', name: "mobile" }), h("slot", { key: '457a685985e8dda33bfd158e4caa497816aec4e8', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,11 +79,11 @@ export class DuetNotification {
         return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
     }
     render() {
-        return (h("div", { key: '457e94b4a6853aa86a9cca92506b7aecc31aebd9', role: "listitem", class: {
+        return (h("div", { key: 'e116ef2939b8668fc7279240fdf496f47517525b', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'e011022f39bd5e719c9cae5ec54b4233f1bf9fb8', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'e2c33d869adfc549195685ad1bbd1e2d5c4370b2', class: "duet-notification-container" }, h("div", { key: 'e491caeba677f8e78da287b50621e33be6519753', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '4cdf556b6b6354da2174ae00af435199aa2dbe94', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '942680343125bc34098440f5fec8abf5db5fb4ab', class: "duet-notification-content" }, h("slot", { key: '63a85af1051ad93c0569cfead2f104c32f446b7e' })), h("div", { key: '08dcdffb37beef2796ba05ae48a233badf652ef4', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'ac7b3f44a84463a437c6954d034b535dffcbc978', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: '42276fe951fbbabbf6ff6b3f2051d11157890e2a', class: "duet-notification-container" }, h("div", { key: '56dcb28c55e3881f6d3db4e19b92bd31bc414172', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'fd07536d88807026f7b41ab30ad85ea3e1af6032', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'e3daee0b1da9007ccf0338e2c093e46eec357331', class: "duet-notification-content" }, h("slot", { key: '9bdcdf46004eac0eeabf90599190a403420e255b' })), h("div", { key: '2b8ac8c2a2ee2552011334bb902fcf179359641c', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,15 +56,15 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '52d02a4dce3ed0bfe7d0281e536c14b7d2d7af02', class: {
+        return (h("div", { key: '3328f3fe2eae32ac303bd225286f8cb120ab61c4', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '5b8730f3424abb59a4f112a8cf4f820d3ea18f8b', class: "background" }, this.theme === "turva" && h("div", { key: '38b4170db541d4a236704fb6b27740c33919ef83', class: "background-mask" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '4b4724634d1e265f5647dcd33721a98867e8bd60', class: "brand-shape" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '26f7bc99f46804ee1102ce912f6ca77d339be248', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '4f2aa62fb0c1db1e07c64e15a089091ec2eab04c', class: {
+            } }, h("div", { key: '6004c4cad41df3235c35028e22b99687822834a3', class: "background" }, this.theme === "turva" && h("div", { key: '96c29409898ad2d9e17f7a239de51564edeb6c3d', class: "background-mask" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '98927459ce052f21595e04456755f717bef082eb', class: "brand-shape" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '227a5d17a08578a3be98c62f2d70462b5c4b8b46', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '63df03a73b3f9fed6a2da169909fc3d9f66d5626', class: {
                 "brand-shaped-icon": true,
                 "secondary-background": this.iconBackground === "secondary" && this.theme !== "turva",
-            } }, h("duet-icon", { key: '0b654e7123f11229e0c685e0b81a46697a02b292', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'b6d28fa2f26538252371352175a8a9bba5cc8957', class: { heading: true, "has-back-button": this.hasButtonSlot } }, h("slot", { key: '283f4783659934a188371693ff2f418b256f43c3', name: "heading" }), this.hasButtonSlot && (h("div", { key: 'bf572a5c8cb71cfb3fba0090e4ca0279b0f9e8f2', class: "button-container" }, h("slot", { key: 'a78e5b2921240203bcd7572825e46b8a49c236cf', name: "button" }))), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'e0d6bae844200dbd0cc4264186c178e9cbcc4c3a' }, h("duet-spacer", { key: '5e02b1d6f9d9ae5133ec857b69da04d73159a213', size: "large" }), h("div", { key: '8b14ec6f1cda71d6a69236e9256faa91519da39e', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("duet-icon", { key: '37acbb96cb330205c3ebe49a067ac13aed9e41e4', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '1e1418a1f8d795ea22ef9d109a492df7e02c18da', class: { heading: true, "has-back-button": this.hasButtonSlot } }, h("slot", { key: 'd6b003c8333758e02039e2d9c34fc14e4a29d8e5', name: "heading" }), this.hasButtonSlot && (h("div", { key: 'e41431ef7cd5f5fabebe5f0a6bd8130b1fd7e127', class: "button-container" }, h("slot", { key: 'c04b5938d41a029b7e6eed4024a6c09790f5cc71', name: "button" }))), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'ee4a64fc94e17fdeb0cfc4885412d6cef97582e3' }, h("duet-spacer", { key: '5c39c12f1ed87439b8c8273b4c919f865fda45af', size: "large" }), h("div", { key: '7174a3aa5f24863cdb4b4a194f1003610fdb9ae8', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,18 +80,18 @@ export class DuetPromoCard {
             img: {
                 src: this.image,
                 alt: this.imageAlt || "",
-                loading: "lazy",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
                 class: "image",
-                role: this.imageAlt ? undefined : "presentation",
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: '17e585c7caea2ce49b25ea82914c047ff6c82a9a', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'd71249878100984ee82f889d89c9457c730f7662', class: {
+        return (h(Host, { key: '97dab264c5d107592d20f0f417be8f19afe3d8fd', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'c45359578b2b47d473998c61c848da71b70c800d', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'c4edfe1d3f7a37846ce57b02390f6c506c2c141b', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h(DuetPicture, Object.assign({ key: '4db132f911aa01f941743b55bb6efb8275219bb8' }, pictureSource)), h("div", { key: 'cac0e424e892d37419eac7e2af2b0bd7308b0c39', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '36a74542f6621186fead0089783ac32a418b3125', class: "pre-heading" }, h("slot", { key: 'd8ecaaa3fe7d32b1d751acd669b6869a2168231f', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'ae586b7d14276add01c99296d8fc96844eed3ee2', class: "heading" }, h("duet-heading", { key: '7079249d8751808397889bc332aac7e4bf0beb00', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e4211262efe0fc117017355c175487a24dc52485' }, h("slot", { key: 'b0f6196e3cec65f855231d232684e7507f71a972', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'c3275a5080abb7488022cdb97da68110872fc80e', class: "description" }, h("duet-paragraph", { key: '0232414d087686f41f37fe95cbecda5217250ac0', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '04d9e5329afdbaaec69f7848017ae5489aa671c1' }, h("slot", { key: 'da7bfca8139e63ee663bb426ca6ebdad8fed35cd', name: "description" }))))), this.hasActionSlot && (h("div", { key: '054ddda2d414a26348e684738ebad3042ea292b3', class: "action" }, h("slot", { key: '348682adce3b3f16de045034dccf4daf48edc6ca', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'ef88f3802caf987b1f4507d4666e4c1e995c03ed', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h(DuetPicture, Object.assign({ key: '56569975e0e19da32854f893faa7735b8ad02aed' }, pictureSource)), h("div", { key: '2f7457dfc83c5d90fb9bab5db26a4785d48af1c1', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '2219e5e9347de718cd7a1d7d647e8309ee650831', class: "pre-heading" }, h("slot", { key: 'd5da5a114026a15e4dcbef0017a9e4e626f1f4dd', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'c3c9d6e2cde6750417e55cd568e92c2c6e1e794f', class: "heading" }, h("duet-heading", { key: '30369ab97d1b23ebb0efd58498f088663a7fd77f', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '697f670a938866d937aed46cf361e3fb038047b9' }, h("slot", { key: '20d4d9b0ebccd08a2c3058284bbe6ab7cf5631b6', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '6336dc1b21d5e7e2280000db82489ef2ebce379d', class: "description" }, h("duet-paragraph", { key: '1d5200f1d385d5600a4db1aafc9ff8f8adfc0945', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'a814b4225fc2b5882542079a92057a5aa4be8a25' }, h("slot", { key: '8dfe422bb5fa8a28be96b4a61a02c00d53158dca', name: "description" }))))), this.hasActionSlot && (h("div", { key: '37b653137388b4a43968de02eb65a4b9907c3022', class: "action" }, h("slot", { key: '594172da1335d25e8856e4d7f8db3543a82a8f2e', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -250,6 +250,25 @@ export class DuetPromoCard {
                 "setter": false,
                 "reflect": false
             },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "sources": {
                 "type": "string",
                 "attribute": "sources",

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -158,7 +158,7 @@ export class DuetRadioGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '02e9f8d2279ba0a17975acd1fbe2a47de0b0ab70', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '47e6bc188d4c4e575d75d36367da122316d96bc0', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '18d3f763a86f215663b520717b293bf2310a8f6f', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '0c7ba1f9d7b007e9a7b410270305bfe7c8bb0a11', name: "tooltip", slot: "tooltip" }), h("div", { key: 'a10eb9b3e81d3d8bffb7105380f718da84c61f4b', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '9010cb8e811a5ee69fb6e03c9d1b44fa92f9c60c' })))));
+        return (h(Host, { key: 'efd5c1575bcaa27689fda3d887405f1f8c89d40b', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: 'e7a49a48e778e7536ec79e4dd3f6cc1657c38f39', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'bb72a0c834b31079cd07c6894c98192f346876a7', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '8e0657188162e21abc47f50b341776e83b358476', name: "tooltip", slot: "tooltip" }), h("div", { key: '800d524204ac076c087cdd7916077613b454475d', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '265f7219a181ecc24adf1708a1dd3e2d69b23253' })))));
     }
     static get is() { return "duet-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -284,18 +284,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2f5fa75837cec7537480b0f5eac81c17cb26187e', class: {
+        return (h(Host, { key: 'e4fcbff642e107e2d34afda150b6d018d9495bfa', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '5764bbcb0703456241a485b5d588d65a3d1a8ede', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '0812bcf7ea5189d289b2802404f7a5b72f84e914', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'f9f251d19c6d1a268b47f92f8b3cd894c95e07f6', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '50f2782ad08fd6caa181c7eaa25f7feef7c98a2b', name: "collapse-button-label" })))), h("div", { key: '52b2a5731b450693bb4b3a978dbdb2d7f14777d6', class: {
+            } }, h("duet-button", { key: 'b800fd6f995333456428d33f3bd879d998e69161', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '28a8ddf0c43d1fc83562f90222107add5742c568', name: "collapse-button-label" })))), h("div", { key: 'd8dbfd839185724f0c731fd05fc7318edd55f8ef', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '8df63d3abb46a93cc86cc38eb801ef6a0843b51b', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '52896f20aa1556374ae606865b9baa3d26e5f309', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -303,7 +303,7 @@ export class DuetScrollable {
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
                 "duet-scrollable-stretch": this.stretch,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '5377464cb77bfd26de8b9cdea7c827e08b0db428' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '033251e2116f215b006650c265e0f28b51b4255c' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,13 +24,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4640f2d203680d402788b83e99eab0612d23d220', class: {
+        return (h(Host, { key: '5a776657b9c39546b9e60e4437f56e15cefca547', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: 'df70de3be2c50ec188dc9aab16af90d6c45d6aea', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '6424120aabf584d6b9f0c9e5dacae247f271ae63', class: {
+            } }, h("div", { key: '31100845e191b0057e10ec7e1cffe3b4f4b4f1b7', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '2e9d933ca7deecedc04f5ed2f23ad181e408d130', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'e970057e762239839d30b4d710f4d25cd9b56a2a', class: "duet-main" }, h("slot", { key: '75bc9cc77d08d730e98e956dcec2c4ba15bf6274' }))))));
+            } }, h("section", { key: '6b78add4081f704f1aad60bd587101060ae3fe01', class: "duet-main" }, h("slot", { key: '50949eaf1466fdc6c3e9687085eecf0f91a88a38' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -33,9 +33,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: 'bc7cef36e9635c521aaabfc2fb434aeb06162417', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'dee81d6f9a48a4c8f09778feb1629e37ef7e5309', class: {
+        return (h(Host, { key: 'ef370d616b1e83aa0015053fd55534fe9a927593', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '7ea96cb888a313aeb8a2b7f2a7c5a0c6d9ac2880', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'c585a6c401f0dff23dfa95452fdafc5c1a6a6473', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'b2d811551b33952948948abb7d5abc4d34a6a129', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '2330f5b57f2ca912e048426bd1c2d105a264335d', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'fbcf988fc8fdb69899e9598ebb7549f14174d478', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart/duet-share-chart.js

@@ -63,12 +63,12 @@ export class DuetShareChart {
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: '89abfd2c95426a08eedbb1d09d4394ea0267868b' }, h("div", { key: 'cbdab21514d3ebb70be42df8b110026cc09230e0', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+        return (h(Host, { key: 'ba78b52814e18d4a98cf429a006a3363c004fae2' }, h("div", { key: '545e5ae574e55f8f516c28b2611386306667dc08', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
             .filter(i => !!i.value)
             .map(item => (h("span", { class: "duet-share-chart-share", style: {
                 width: `${(item.value / this.itemsTotalValue) * 100}%`,
                 backgroundColor: getColorByName(item.color, this.theme),
-            } })))), h("ul", { key: 'b4a9f997fc34340201a694935403f61fae0d7af8', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: 'a9cf601d34533e368d69ddc7f40adbc0b9c5b413' })));
+            } })))), h("ul", { key: '84ded0fa2267a1187feda3ac3d0774b8628532ce', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '5657cc260498b721b27387d03a650a677498b872' })));
     }
     static get is() { return "duet-share-chart"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -10,7 +10,7 @@ export class DuetShareChartItem {
         this.value = 0;
     }
     render() {
-        return (h(Host, { key: 'aa8f13f668d97b03cbe5aefed617945493e9cb95' }, h("div", { key: '11e8bc3d3a5ac3139982782b8f1eb6b8a3503c7f', hidden: true }, h("slot", { key: '005ad83f4d9dfb8577d850b61772efc58f06abba' }))));
+        return (h(Host, { key: '7dae91f324815ceba5f573b93a8aba6a992c424c' }, h("div", { key: 'd5ded78fcdcd3f050a3215eb3b65e8a3a7dcb8e7', hidden: true }, h("slot", { key: '4c892c9c3a1f162e54e7cdbc1c812657402f95be' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -38,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '110365f6f4eb9258855cfc4f936a4953a56f2309' }, h("div", { key: '5553f593915deb08fb2f3cbe1ca6b9271253aabf', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '217672b8691657d2854df050f6cb56a794011fcf', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: 'c43b3dc4a59d9b0cb5b3a765742b6671ae6f5125' }))));
+        return (h(Host, { key: 'fb16f7ca32c1c5b70c7cb19b34d39e0de068a71d' }, h("div", { key: 'fe1252db925d2af57a4dc783d777dbdf691994b5', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'a4597bafb6db9221e482610d9283c992aa42cca9', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: 'df424707a999430019c6cd6853b58ea0d55d2463' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,12 +77,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dc6e16cb08fd3e309601ebfe4bd1b64cdb83fa3c' }, h("a", { key: '565a7243cf494ed6e8ec78435b3b90490dfae422', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: '71791bded96b7d6edf41608fc4d9c492741ddbce' }, h("a", { key: '9c8645e7357b0e6a0d5f4407f82f96c6f42aea5a', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: '61a9ba050ab811c82ec0f824e2235a4fd3c7bc2b', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: 'f481a2e77aed5fa8e0781be21f7dd3527fc24532', class: "label" }, h("span", { key: '2e1a3676bac5ea9d24198535c3f56a1913485450' }, h("span", { key: 'c6d4fc5cfab9566872f9f7f442b4171f8e9f3849', class: "label-container" }, h("span", { key: '55332c9a4587cdef32f32cd2e740d2e9edcc19b3', class: "label-content" }, h("slot", { key: '94c66169219750becb8d9f068cd2744cb761bf3c' })), this.external && (h("duet-icon", { key: '5208591ea13aa8bf9b7f90ce40cb858de42a173f', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '44418b62998ee7874f226014f4cdcd47a454a164', name: "description" })), this.caret && (h("duet-icon", { key: '052f984772e360db9890e2d5259bc8687732c00e', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: '8f76be0cc20b53561e9f1bbd954a8e19e1bf98a3', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: 'f1e91400ccba4abe58478161a5123dac9e006554', class: "label" }, h("span", { key: 'c93d3f5220ce1ac55c83985bb1df18511bba18a4' }, h("span", { key: 'af6eba590285a896e6f4b9f9d87db82beb0ef9dd', class: "label-container" }, h("span", { key: '62e6519e6f026941b5ac4f8cc65e638d11512002', class: "label-content" }, h("slot", { key: 'fe67fbd9819d698956bfd3595ebd70e2d03536d8' })), this.external && (h("duet-icon", { key: '56d97a47dc264cf28c0b4b08efa53751ea6c8537', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '88c0508cea00310b08cfb79fe23d7f1e07c44305', name: "description" })), this.caret && (h("duet-icon", { key: '186cd9ee20d9c4302e115c857ebcbc0493289870', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }