@duetds/components 10.6.0 → 10.8.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: 'fc3baf3fd1c385e8841cb935f5ea4781fed66367', 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: '5c8edb2e88c8214bb38753dd019c9d24a1421dad', "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: '93836d0a46c0293fc59790869a0c0732b055c191', "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

@@ -310,6 +310,10 @@ duet-caption:not(:last-of-type) {
 .duet-input.after-chip {
   padding-left: 8px !important;
 }
+.duet-input[readonly] {
+  color: rgb(62, 84, 102) !important;
+  border-color: rgb(212, 223, 229);
+}
 .has-error .duet-input {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
@@ -500,6 +504,9 @@ duet-caption:not(:last-of-type) {
 .duet-input-variation-revealable.disabled .duet-input-relative {
   outline: none;
   background: rgb(245, 248, 250);
+  border-color: rgb(181, 198, 208);
+}
+.duet-input-variation-revealable.readonly .duet-input-relative {
   border-color: rgb(212, 223, 229);
 }
 .duet-input-variation-revealable.has-error .duet-input-relative {
@@ -525,6 +532,14 @@ duet-caption:not(:last-of-type) {
   border-color: rgb(214, 28, 82) !important;
 }
 
+.duet-input-container.has-adornment.disabled .duet-input-relative,
+.duet-input-container.has-chips.disabled .duet-input-relative {
+  border-color: rgb(181, 198, 208);
+}
+.duet-input-container.has-adornment.readonly .duet-input-relative,
+.duet-input-container.has-chips.readonly .duet-input-relative {
+  border-color: rgb(212, 223, 229);
+}
 .duet-input-container.has-adornment.has-focus .duet-input-relative,
 .duet-input-container.has-chips.has-focus .duet-input-relative {
   outline: 2px solid;
@@ -637,6 +652,10 @@ duet-caption:not(:last-of-type) {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 42, 59) !important;
 }
+.duet-theme-turva .duet-input[readonly] {
+  color: rgb(53, 79, 101) !important;
+  border-color: rgb(212, 221, 226);
+}
 .duet-theme-turva .duet-input[disabled] {
   color: rgb(95, 122, 143) !important;
   cursor: not-allowed !important;
@@ -671,6 +690,12 @@ duet-caption:not(:last-of-type) {
 .duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
   border-color: rgb(120, 145, 164);
 }
+.duet-theme-turva.duet-input-variation-revealable.disabled .duet-input-relative {
+  border-color: rgb(178, 194, 205);
+}
+.duet-theme-turva.duet-input-variation-revealable.readonly .duet-input-relative {
+  border-color: rgb(212, 221, 226);
+}
 .duet-theme-turva.duet-input-variation-revealable.has-error .duet-input-relative {
   border-color: rgb(214, 28, 82);
 }
@@ -687,4 +712,10 @@ duet-caption:not(:last-of-type) {
 }
 .duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
   border-color: rgb(120, 145, 164);
+}
+.duet-theme-turva .duet-input-container.has-chips.disabled .duet-input-relative {
+  border-color: rgb(178, 194, 205);
+}
+.duet-theme-turva .duet-input-container.has-chips.readonly .duet-input-relative {
+  border-color: rgb(212, 221, 226);
 }

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

@@ -138,6 +138,13 @@ export class DuetInput {
          * interact with the input, and conveys its inactive state to assistive technologies.
          */
         this.disabled = false;
+        /**
+         * Makes the input component not mutable, meaning the user cannot edit the control.
+         * The user can otherwise interact, e.g. by selecting the content and copying it.
+         * Due to differences in different browsers' and screen readers' implementations it
+         * is strongly advisable to use this only with type="text".
+         */
+        this.readonly = false;
         /**
          * Controls the margin of the component.
          */
@@ -177,7 +184,8 @@ export class DuetInput {
          */
         this.label = "Label";
         /**
-         * Display the input in error state along with an error message.
+         * Display the input in error state along with an error message. If input is disabled or readonly,
+         * error is ignored.
          */
         this.error = "";
         /**
@@ -347,7 +355,7 @@ export class DuetInput {
             return clearing;
         };
         this.keyHandler = (event) => {
-            if (isEscapeKey(event) && this.clear) {
+            if (isEscapeKey(event) && this.clear && this.writable) {
                 this.handleClearClick(event);
             }
             if (isEnterKey(event) && this.variation === "revealable") {
@@ -360,7 +368,7 @@ export class DuetInput {
             }
             if (this.chips && this.nativeInput.value.length === 0) {
                 if (isBackspaceKey(event)) {
-                    if (this.isChipSelected()) {
+                    if (this.isChipSelected() && this.writable) {
                         this.getSelectedChip().removeChip();
                         setTimeout(() => this.selectLastChip());
                     }
@@ -469,7 +477,6 @@ export class DuetInput {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
-        this.isCaptionVisible = !!this.caption;
         // Accept also slot element so that other components using duet-input can pass their tooltip slots here.
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip, slot", 1, true);
     }
@@ -486,9 +493,15 @@ export class DuetInput {
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
     }
+    componentWillRender() {
+        this.isCaptionVisible = !!this.caption;
+    }
     componentDidRender() {
         proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
     }
+    get writable() {
+        return !this.disabled && !this.readonly;
+    }
     /**
      * Sets focus on the specified `duet-input`. Use this method instead of the global
      * `input.focus()`.
@@ -658,7 +671,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '1119e8e51f3a490e34665e77ce32ec21f7bc70c7', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '31afa65dcb1b161f8c5a87c65953a26a552066b8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '5574afef8c592593193cbf0c99eaf8eaa84dbf11', class: {
+        return (h(Host, { key: 'a859732fa2ed3e36d5564c93e08d4bd4cb501188', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'ce15aa89693e557f5abd16e8111db759be70c89d', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '58f44c874cc78e07b6ea9f9b07502f46830d389f', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -667,7 +680,7 @@ export class DuetInput {
                 "has-icon": this.variation !== "button" &&
                     (!!this.icon ||
                         (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
-                "has-error": !!this.error,
+                "has-error": !!this.error && this.writable,
                 "has-chips": this.chips,
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
@@ -675,11 +688,12 @@ export class DuetInput {
                 "has-prefix": !!this.fieldPrefix,
                 "has-suffix": !!this.fieldSuffix,
                 disabled: this.disabled,
-            } }, h("div", { key: 'cd0dfb4e8ef821c84d342fff017da9b3e6938134', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '7ef9a4e3ccbc5b7ac030ca66912eb0471103ed10', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'f263424aa51a59f4252cad4b4a1347b5986869ae', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'b4afd5ae65bbc03083b81996965cb354d6fd2a35', name: "tooltip" })), this.caption && (h("duet-caption", { key: '1d126824ee2ef4b7a4dae8650363e9da0b58c288', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'adb5b8fa3b3de37c96d74fd1b888de75689a3ce0', class: {
+                readonly: this.readonly,
+            } }, h("div", { key: '285821770ae823d73eaaeff2f2c88996778f8b69', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '3fa55f1f4bd918ba022ecf233e9aff5b972a72db', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '2e08a75002784f2269629dce2ae232fa768d0906', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '4125f60b2ae5f69cf6e33ad5485f6d9633b6ea47', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'e7c72af17640691b585f81ac5c9c838ebb8c36b0', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'f7228488fa060e6b0344fd86ac487aed1c76a418', class: {
                 "duet-input-relative": true,
                 "duet-theme-turva": this.theme === "turva",
-                "has-error": !!this.error,
-            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'fcadd06bf9e0dc4115c0bd004de23fa5692b03fc', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '84a8a1feed5a0895936f5e1d5ee310c6282f1678', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '90533c1b234e2644eb97317f903abbf04fee8138', name: "button-left" }), this.fieldPrefix && (h("span", { key: '151fd6757766b8c7e86ded73639d87bb32814089', class: "input-adornment prefix", id: this.prefixId }, this.fieldPrefix)), h("input", Object.assign({ key: '06811722717032661d4ba5e3bfa9c2b6196cf082', ref: input => (this.nativeInput = input), onInput: this.onInput, onKeyDown: this.onInputKeyDown, onPaste: this.onInputPaste, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+                "has-error": !!this.error && this.writable,
+            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'b9f16783722dd5eceffa4c680f735d0a967e2cb1', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'ceeb27c775ffc161915f98aaeeb0cf0a61b56b95', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '8cccc4fde3d2315b69a9212e2f1bacf627fefa0b', name: "button-left" }), this.fieldPrefix && (h("span", { key: 'cdc1574242d2921e79c871330b4e058e8a7219cb', class: "input-adornment prefix", id: this.prefixId }, this.fieldPrefix)), h("input", Object.assign({ key: '707a06f6db287db4753feafcf24f5d4d1e34d01a', ref: input => (this.nativeInput = input), onInput: this.onInput, onKeyDown: this.onInputKeyDown, onPaste: this.onInputPaste, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -687,17 +701,17 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.getAriaLabelledBy(), "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.getAutocomplete(), required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), this.maxlength && (h("duet-visually-hidden", { key: `maxlength-announcement-${this.maxlengthAnnouncementKey}`, "aria-live": "polite", "aria-atomic": "true" }, this.maxlengthAnnouncement)), this.fieldSuffix && (h("span", { key: 'b2d284fc05798f7dab08555f524cabf4f94f0e19', class: "input-adornment suffix", id: this.suffixId }, this.fieldSuffix)), !this.value && hasInputIcon && (h("div", { key: '8364a8a7687b6e37279585edf55da9005673f4df', class: "duet-input-icon" }, h("duet-icon", { key: '1b420da3e76241f1e105ce5ef8b9f40e6490424d', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'c67978258fbf64a22563a8e139b7a7de012bb4ca', class: {
+            }, value: this.value, disabled: this.disabled, readonly: this.readonly, "aria-invalid": this.error && this.writable ? "true" : "false", "aria-labelledby": this.getAriaLabelledBy(), "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.getAutocomplete(), required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), this.maxlength && (h("duet-visually-hidden", { key: `maxlength-announcement-${this.maxlengthAnnouncementKey}`, "aria-live": "polite", "aria-atomic": "true" }, this.maxlengthAnnouncement)), this.fieldSuffix && (h("span", { key: 'b75739603d5e5ad093db7a2440c0b8abc217dcf6', class: "input-adornment suffix", id: this.suffixId }, this.fieldSuffix)), !this.value && hasInputIcon && (h("div", { key: '404d988da35d4387e0eda7e1d343e6d98df86be7', class: "duet-input-icon" }, h("duet-icon", { key: '917289116b7c97efb8f384353f44f02c7fd07205', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && this.writable && (h("div", { key: 'b7b38ab40d68c5092bc82672308572134a033168', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
                 [`input-padding-${this.inputPadding}`]: true,
-            } }, h("button", { key: 'b243244d6d5184c42a9afb93483479a0b07bad7d', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '2ff21863005e55dc7a4dc1a16e2e2e40ad7f85cf', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '7732892f159a6c7c9ad7c89b0031052b1ed45502', class: "duet-input-icon" }, h("duet-icon", { key: '97de6dc8ff0c506db494dc36edc6d0107792c2b9', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '5c940caf605e2eaff4db2a36c63548db78f36f41', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'caf0a7c8bec4a620e2ca5f897eaabc1814f32c5d', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: 'ea77d45ff7dde685c5f35e0b33d1c75189d2d6c4', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '7807be8fb14c59731458e17b7ceecb99cda77545', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'c6a744f0be1c484f051980f70d0a0deed5fcd9c0', class: "duet-input-icon" }, h("duet-icon", { key: '9d33dac97ba817f3bfa11e82097b95499727c885', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '435f5d3927a55c4ce2c17e4483305b4f47afef8b', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'a1074a0cfe211da5cdebdf9a81c82d6200de6961', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'cc394dbd7d28fc9e1cf0a864c67e7e7a6a835d1a' }, h("span", { key: '20033ed28c86634d6faf03180e53cff84def1329', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '0a8bbe5ec03d73b5e673c42a7031c6b097bd8681' }, h("span", { key: 'cf080989a3e7b86369904921249a95fe1cb3bc19', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'b72c50503fa80fd1ba6764b7b3348bc5d7b2813c' })), h("span", { key: '25790e8c5147bb271fefa6cbce2343287b57c816', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c62d261a03ebec492aed9c65a836525e47660cfc', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '32c4cb54404e67cf564c60e555f7aee3437f0282' })), h("span", { key: 'a860619ce4d528dcb8d714ef3680629640c08461', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && this.writable && h("span", { key: '3dfc64f27935e571630a215cbd69bcd2c0d8e1f1', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1096,6 +1110,26 @@ export class DuetInput {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the input component not mutable, meaning the user cannot edit the control.\nThe user can otherwise interact, e.g. by selecting the content and copying it.\nDue to differences in different browsers' and screen readers' implementations it\nis strongly advisable to use this only with type=\"text\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "identifier": {
                 "type": "string",
                 "attribute": "identifier",
@@ -1356,7 +1390,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display the input in error state along with an error message."
+                    "text": "Display the input in error state along with an error message. If input is disabled or readonly,\nerror is ignored."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -464,6 +464,10 @@ button {
   border-color: rgb(228, 233, 237);
   box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
 }
+.duet-theme-turva.duet-link.card:hover {
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
+}
 .duet-theme-turva.duet-link.block, .duet-theme-turva.duet-link.block-center {
   color: rgb(23, 42, 59);
 }
@@ -476,6 +480,18 @@ button {
 .duet-theme-turva.duet-link.block:hover .duet-link-content, .duet-theme-turva.duet-link.block-center:hover .duet-link-content {
   color: rgb(185, 3, 41);
 }
+.duet-theme-turva.duet-link.article-list {
+  border-color: rgb(212, 221, 226);
+}
+.duet-theme-turva.duet-link.article-list .duet-link-content {
+  color: rgb(23, 42, 59);
+}
+.duet-theme-turva.duet-link.article-list .duet-link-meta {
+  color: rgb(72, 100, 122);
+}
+.duet-theme-turva.duet-link.article-list:focus .duet-link-content, .duet-theme-turva.duet-link.article-list:hover .duet-link-content {
+  color: rgb(230, 23, 64);
+}
 .duet-theme-turva.duet-tab-to-link {
   min-width: 120px;
   color: rgb(23, 42, 59);

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: '0a7c2de12ea320f4fcf5d73e60200af11254f8c3', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'bb416240f5adc73c8eeacbd4ca0524619326a954', href: this.url, class: {
+            } }, h(Tag, { key: '6351d938da19503fa7c0e3526700729a9f2c054e', 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: '93429c86b018cb9924bb270b97c4cc6ea77e15e2', 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: '0cecfd17dc6b92affc741ef0acd7bd0711458349' }, h("slot", { key: '697172f2c68302fa10188e2b403d3cddbd00e87e', name: "label" })), h("dd", { key: 'd9fd6244ee03c35c91e8b22a4ddce2daf7e97c0e' }, h("slot", { key: '52593380dc62cbb4245718eaf4093fa9e1faa45c', 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: '88f40e311573b2d27899805495afd382b2aad3fb', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '08b48017ee3ecd55f15950dfaae5d3ad1793c903', 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: 'd976b8e93df053c47a8a9eb29f110032af9c5296', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'ca7e1fdd2f0076481571c6e68dbbf502b07a6eac' }))));
     }
     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: 'ff056c7f9b32fc195dce24533ee8630abfeaaf3a', role: "listitem" }, h("div", { key: '60e89230ad26c406f88ac6f97b0aa6c6ba3d375e', 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: 'f17715296f5d32580c607489aa7af48e86f08d76', 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: 'f8c1548339d36aac26609301b610e0f06970d3f4', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '8c9b33f5e4963f0a44ebfd8c2153e67273e220fe', class: "label" }, h("slot", { key: '384f003e1c584084aa93a1419370fb90ee1dd12b', name: "label" }), h("duet-icon", { key: '09e840b30922276af41659768e0ccdbc2dfd6bfd', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'fe85298a3a0c0bdffba6571a62a4946b884aaca1', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '31a887188bb39ed4efbe1383940b3b8db7396102' })))));
+            } }, h("slot", { key: '826246d0e8db1cc67ad2549613e8ae6dc6a6a6b0' })))));
     }
     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: 'd38d954b553c14935519a49e02698a1bd32428b4' }, h("a", { key: '2476410fa261eb67053dbd56f01bc335bdbcbd7d', 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: 'ba2417251a7dbd8bc7148c65d0aae529f728b274', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '257327a6af0a87c8565bf75cace2b5657580783a' }))));
     }
     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: 'e9d6de396865bf28beb5717950467d4b0d1f519c', role: "listitem" }, h(TagName, { key: 'f7cbfca8d2781170838b37dfa65714ddbf932145', 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: '934988ad9b43c8e3691c02a698c0677ea2629faa', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '50cbb5cdd4a117936eea719c9f176667688e74dc' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'cfe3ea2669e9d8eb1f14ffa88eacd1c08548f55c', 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: '8c3490151abb08fa0f203abfa0d7376b26df086f', role: "listitem" }, h("a", { key: '6b285bf13edb937dc1e7a6e5e6479ae58c9e2578', 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: '551b1bb669f59a9db03276cc4bfdebd3c42a8929', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '271053e138876c15abe304dcb141122d5d313f1f' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -284,7 +284,14 @@
 }
 
 .duet-modal-close {
-  position: absolute;
+  position: relative;
+  z-index: 301;
+  float: right;
+  margin: 8px;
+}
+
+.duet-modal-slide-up .duet-modal-close {
+  position: sticky;
   top: 8px;
   right: 8px;
 }