@duetds/components 10.3.0 → 10.4.0

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

@@ -284,7 +284,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '0516fd4837dba53aae81d2ae0c78b70585422107', role: "region", class: {
+        return (h("div", { key: 'f6cddcb9c3f7095554a386ee08f94edd696de30f', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -302,17 +302,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: 'c9519b4ff36fdb3ec68d569667065a743d57a360', class: "background-area" }, h("div", { key: 'ddb4386a162fe50a1ec65bfb5920194cd8b8247f', class: "background-container" }, h("div", { key: 'af9a1b99358098c95c9ca8ff11c8b4e8fed691db', class: "background" }, h("img", { key: 'caea4a0bec4b0fab914d327878fd82fc8937528d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: '570fc51ca220622428a0d0ae0c0956c5f1ee0452', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '954467ff85417b30a4a6fc18c700464df609f586', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'a709338a6570cf245f37272263b03d7a27128f9e', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'b93c7f5ac020bd754dba88132aaa9b7ea1ba4003', class: { background: true, [this.layout]: true } }, h("div", { key: '905662fbb3364da7510db2555f03de974562e505', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '262820358ecd29844c65be4a1d7e82549b45cee2', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '3d20072088e4a405b83d2f65268f2d488a5112ac', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'e8c63df219322992bb8d722b01dcad205c044f9c', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '5b265dcc9db7e68c749b2b9c9d0e8fa4064f6b70', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '81e36645d1a21d9bc66fae4765e9ef3272537f03', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '504a1771e2e356783be5844509166ab29f78159d', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '97b506d236d0679f53696cac58503d7be257231f', class: "background-area" }, h("div", { key: '36890d9dc2a8f8b124420c7b3225ada20d01e35e', class: "background" }, h("div", { key: '1df015994f4bd85a884de6e1875be96408f599b7', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f68c97a4b3c8e4b03bac4bb2181e630ef63c8639', class: "brand-shape" }), h("div", { key: 'ba89b95cc6d1d2a55ca0681206266f0e52d10059', class: "brand-shaped-image" }, h("div", { key: '0c133b49c54fa275782754ac6ab44c468592b50b', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'c9963f3b6134885b5cd4facc450e337fd3807749', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '6cd4723c1191be8841b3e72c186438d60b762165', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '76e6d63f430faa884dbe432dcf5241287edb6d94', class: "duet-hero-image-mask" }, h("div", { key: 'ac28833afeffb4273df030b71484549022dbcd7b', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '3bd97c165b52eae5b07653f04508c94f3e2fbaa3', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'a3139ada0576c86e38608e8b3babde7bf1cb6428', class: "duet-hero-back" }, h("duet-button", { key: '18696adb6758e912d78507989319403a05031383', 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: '8e546e1f6a87372506acedb5ea3e36bc2886f789', class: "background-area" }, h("div", { key: 'c25e0f3339fa89a39a5b46ad27648300a7c489b8', class: "background-container" }, h("div", { key: '31200db09804314fe8b9a015aa7b250f3343691f', class: "background" }, h("img", { key: '5f1b008fe67fb54336d65d0a91f13921293ac03f', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'c62590322740c9e3d1938e5f89dc13885abf07b6', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '8f7994ab77f57be6ea58dbf8102415bcf7eb7ee6', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '01a855e32e56a513ec6cbbe3108b2d7f81af9154', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '863ce7546a76b161f64375733f35f861574c2fd4', class: { background: true, [this.layout]: true } }, h("div", { key: '00f7dcf3f138928620d9427e17c330dca44a1e51', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '0c6c33ed4275e93f68f3d2cec43b879bbc74c60c', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'd4fad75a79b2b33cb6e31d1265842af3a5535873', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '7af50eabf0b09917bd5cebe2b44c55b6f0839231', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '90eb7934807f9e153fd8e53672c5597651aaf8c0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: 'ce6e8cdcbd80b573448acb33539f59f06b28df9c', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '139e86a27857835a90d453bab2fcdbc555f41e96', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'b0acf2f12e86bd067f963613d12a85b2db616755', class: "background-area" }, h("div", { key: '5ca70d15eca85878c065441b64121bf935d07d32', class: "background" }, h("div", { key: 'fda4ef9233986b3d1ac3111b374018b6b4296295', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '638a9905eab07c7fee8140423b11b1e28fdedb65', class: "brand-shape" }), h("div", { key: '9a40f25f71ebaf02e17101a48f2cd15aa1b8de83', class: "brand-shaped-image" }, h("div", { key: '520668ba497de55d0c671a87fe4a397a901de7cf', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'aa2e5b706988a62baf70633a4d175ee1f935424c', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: 'f46858232e9b0c0e014497eb373f276a0253e25c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '8930f498a1b3d8c17cd6bfb2ca90011ec953becd', class: "duet-hero-image-mask" }, h("div", { key: 'c96d8a199eb919a14a9b372961b7e2e97622edf9', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '1960489a3dcd637d0d4c8cd90d4850563d96f62b', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '72393575c1cda007fe0a93f50fd29f2254e57635', class: "duet-hero-back" }, h("duet-button", { key: 'bb9c38f25da6cd86a6a1d9c550e39be5e553df52', 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: '28d192b8f069b4a32baa01a027abc42bdfb95887', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '012bf0e526bb27720cf999130cee18c48f154328', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '5cbbe391ce79e56835076065ebcffe0bab5228ba', 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: 'b3e524e1dfb703166dabf2f84bbcc4114b55a30a', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'aa79305d862247ab6107539664112d93a239e8a7', 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: 'd7be291d344c0357c68891dafcce35f2b39b5da5', 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: '32bb887d95e7bbf0c2037520f47080d4a4680bba', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'd391fad4e9710b15fe3bbc98e8e22078f3a84972', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '927d16ef81835f367bda345400b4603d6c5dd36a', 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: '05b8812b4a5f224422c0d102c9f6869bfcfe3a69', 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: '512d50180bb9fba05bcde538b19fa87e70cf5a3a' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '1ca120e7175b467c0265513ecd4d32a30e5eaba8', 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: 'cac362aaa6b377b1dba3651f712e386182d9a0dd', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '402006ac87cd15880b91d0267f2a1128870c7de7', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '041bfe57134d086c3d94d2ee33d68a067dcccfba', 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: '20f0e190fec2a99d7b4cab63daf81ca8907fd58a', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '1e7cbfe931e89c9bffd4ae4cd5a1ceff2c910534', 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: 'ecd154b6b7291eb2de4e8290562a1d1ee3930d8c', 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: '4a2a625be57f1c26a8e8daab58e714ef99dcf103', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '73bd53a15848745effd4c211434de70a82e3cb9f', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '6d56faeee194fcf3af381a19bfed5aa0b25f7414', 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: '5c9877bead31171f246c3b2519956cbcea6cfd4a', 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: 'c168f8e3f59e2d27cb8cb6d13be251628b044ccc' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '2c8a214eaa9fb3db915ecda2efa67a6433e9fe81', 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", Object.assign({ key: 'f49f23c4edbf72e479d8f7cf4cf2767d688c362b', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'a99b7943cc1408366bc93827beb41867aaf5fb01', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: '6cb23cf63b47de3c8ec26c3089ac5e162c117039', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '559b443673459389d61eea691ea9c8342f97f240', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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: 'f6a74ccabd59055d22eec3654bde9c81fd4a9ce3', class: {
+        return (h(Host, { key: '2a800d3292964b5a1dd5fd454662f690ce9e6b5a', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'f2ea10e9ec8459d5a5995781e193c6d8df7fb1ef', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '4d5d3fc155d6d2e4f677d8753c116c82eb865a2c', "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: '3d93b31d1831fa77b71a5f574a38d838636c7757', "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: '6c79866426237ff75ff36401a9117dca1a68cf19', "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-indicator/duet-indicator.js

@@ -45,11 +45,11 @@ export class DuetIndicator {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: 'c63179a2e8ca1cde9ee2aa2d44c5df87802ef132' }, h("span", { key: 'cde25bf28ee426860b58f93d639501f2ce21cbf9', class: {
+        return (h(Host, { key: '0513ee5c8cb2770eb10e753901e8db638c665112' }, h("span", { key: '64ec0e8625b9cf03ed41d6cbe6ae9e286f5cd08a', class: {
                 "duet-indicator": true,
                 [`duet-indicator-${this.variation}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }), h("duet-visually-hidden", { key: 'e4d1b554af2aa1e512c5271d274881f3d0c9b488' }, this.getAccessibleLabel())));
+            } }), h("duet-visually-hidden", { key: 'ae27d7871ca7bbde4e8e62d3c389c4f0c5b17090' }, this.getAccessibleLabel())));
     }
     static get is() { return "duet-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -202,7 +202,7 @@ duet-caption:not(:last-of-type) {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva, .duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva {
+.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -310,10 +310,12 @@ duet-caption:not(:last-of-type) {
 .duet-input.after-chip {
   padding-left: 8px !important;
 }
-.has-error .duet-input, .has-error .duet-input[disabled] {
+.has-error .duet-input {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
   border-color: rgb(214, 28, 82) !important;
 }
-.has-error .duet-input + .duet-input-icon, .has-error .duet-input[disabled] + .duet-input-icon {
+.has-error .duet-input + .duet-input-icon {
   color: rgb(214, 28, 82) !important;
 }
 .has-icon .duet-input {
@@ -328,57 +330,53 @@ duet-caption:not(:last-of-type) {
 .duet-input::-webkit-contacts-auto-fill-button {
   display: none !important;
 }
-.duet-input::-webkit-input-placeholder {
+.duet-input::placeholder {
   color: rgb(98, 121, 138);
   opacity: 1 !important;
   transition: color 300ms ease;
 }
-.duet-input:focus::-webkit-input-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-input::-moz-placeholder {
-  color: rgb(98, 121, 138);
-  opacity: 1 !important;
-}
-.duet-input:focus::-moz-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-input:-ms-input-placeholder {
-  color: rgb(98, 121, 138);
-}
-.duet-input:focus:-ms-input-placeholder {
+.duet-input:focus::placeholder {
   color: rgb(181, 198, 208);
 }
 .duet-input[disabled] {
-  color: rgb(8, 42, 77) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: not-allowed !important;
   outline: none !important;
   background: rgb(228, 236, 239) !important;
-  border-color: rgb(228, 236, 239) !important;
+  border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
-.duet-input:hover:not(:disabled) {
+.duet-input:hover:not(:disabled):not(:focus) {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input:hover:not(:disabled), .duet-input:hover:not(:disabled).duet-theme-turva, .duet-theme-turva .duet-input:hover:not(:disabled), .duet-input:hover:not(:disabled).duet-theme-turva {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-input:hover:not(:disabled):not(:focus), .duet-input:hover:not(:disabled):not(:focus).duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
-.has-error .duet-input:hover:not(:disabled) {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
+.has-error .duet-input:hover:not(:disabled):not(:focus) {
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
 }
 .duet-input:focus {
-  border-color: rgb(0, 119, 179) !important;
-  transition: none;
+  outline: 2px solid;
+  outline-color: rgb(0, 119, 179) !important;
+  outline-offset: -1px;
+}
+.duet-theme-turva .duet-input:focus, .duet-input:focus.duet-theme-turva {
+  outline-color: rgb(23, 42, 59) !important;
 }
 .has-error .duet-input:focus {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
+  background: rgb(255, 255, 255) !important;
 }
 .duet-input:focus + .duet-input-icon {
   color: rgb(0, 119, 179);
@@ -513,24 +511,55 @@ duet-caption:not(:last-of-type) {
   outline-color: rgb(62, 84, 102);
   border-color: rgb(0, 119, 179);
 }
-.duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
+.duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative.duet-theme-turva, .duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative.duet-theme-turva {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
 .duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 
 .duet-input-container.has-chips.has-focus .duet-input-relative {
   outline: 2px solid;
+  outline-color: rgb(0, 119, 179) !important;
   outline-offset: -1px;
-  outline-color: rgb(62, 84, 102);
+}
+.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative, .duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva {
+  outline-color: rgb(23, 42, 59) !important;
+}
+.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative {
+  outline: 2px solid;
+  outline-color: rgb(127, 150, 165) !important;
+  outline-offset: -1px;
+}
+.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative, .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
+}
+.duet-input-container.has-chips.has-error .duet-input-relative {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+}
+.duet-input-container.has-chips.has-error.has-focus .duet-input-relative {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
+  background: rgb(255, 255, 255) !important;
+}
+.duet-input-container.has-chips.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
 }
 .duet-input-container.has-chips .duet-input-relative {
   display: flex;
@@ -540,6 +569,7 @@ duet-caption:not(:last-of-type) {
   align-items: center;
   justify-content: flex-start;
   width: auto;
+  padding-right: 2px;
   border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   transition: border 150ms ease;
@@ -562,43 +592,30 @@ duet-caption:not(:last-of-type) {
 .duet-theme-turva.duet-input-container.has-clear .duet-input-clear-icon button {
   color: rgb(8, 42, 77);
 }
-.duet-theme-turva.has-error .duet-input {
-  border-color: rgb(214, 28, 82) !important;
-}
 .duet-theme-turva.has-error .duet-input + .duet-input-icon {
   color: rgb(214, 28, 82) !important;
 }
+.duet-theme-turva:not(.has-error) .duet-input {
+  border-color: rgb(120, 145, 164) !important;
+}
 .duet-theme-turva .duet-input {
   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;
-  border-color: rgb(120, 145, 164) !important;
-}
-.duet-theme-turva .duet-input::-webkit-input-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
-  color: rgb(178, 194, 205);
-}
-.duet-theme-turva .duet-input:-moz-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-theme-turva .duet-input:focus::-moz-placeholder {
-  color: rgb(178, 194, 205);
-}
-.duet-theme-turva .duet-input:-ms-input-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-theme-turva .duet-input:focus:-ms-input-placeholder {
-  color: rgb(241, 202, 178);
 }
 .duet-theme-turva .duet-input[disabled] {
-  color: rgb(23, 42, 59) !important;
+  color: rgb(95, 122, 143) !important;
+  cursor: not-allowed !important;
+  outline: none !important;
   background: rgb(228, 233, 237) !important;
-  border-color: rgb(228, 233, 237) !important;
+  border-color: rgb(178, 194, 205) !important;
+  opacity: 1 !important;
   -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
-.duet-theme-turva .duet-input:focus {
-  border-color: rgb(23, 42, 59) !important;
+.duet-theme-turva .duet-input::placeholder {
+  color: rgb(120, 145, 164);
+}
+.duet-theme-turva .duet-input:focus::placeholder {
+  color: rgb(178, 194, 205);
 }
 .duet-theme-turva .duet-input:focus + .duet-input-icon {
   color: rgb(23, 42, 59);

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

@@ -204,6 +204,10 @@ export class DuetInput {
          * Component event handling.
          */
         this.onInput = (ev) => {
+            if (this.maxlength && this.nativeInput.value.length > this.maxlength) {
+                // Android doesn't honor maxlength
+                this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+            }
             if (this.disallowPatternRegex) {
                 cleanValue(this.nativeInput, this.disallowPatternRegex);
             }
@@ -548,7 +552,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '97c6c512b6c027ca8043a43672a95b94f03f6156', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'b822ea081dcf6540e2b68897ee048047aff84628', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '9e605485547ba28244c552f56e417b5601b54fe8', class: {
+        return (h(Host, { key: 'c36aabb598d1ab24aede9cacbbc0f8dfeaf7ff2f', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'ee9481c94a8beeeb5b22e5f9f3dc92a96111e3e8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'a75cdb69696761e21eb42620bc3162f3ffbe062e', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -562,7 +566,11 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: '80b702bcab4580a325ba20786e5c4aabc2ed6097', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: 'c1deac7c8b5bb4a0b7f83b56300847e0320bbe5c', 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: 'c62963ee9ff47b91fa4380725a514df722c9d2a6', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '024482e338a12e5e93c1a281c5780575f72986f5', name: "tooltip" })), this.caption && (h("duet-caption", { key: '38d05c2a565c01b678e55ffd8229387e67d313e5', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '211a0b1ea0a61065f35ba521c44656002a82af3d', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '48c712f9c9ac80bf82ced7d12b6e3d82a4fafd9a', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '94be7e517078792db305259a743d3e9f9b1ed78f', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '1c73512bd1cb13064dface542dd5c83c0ce0bb61', name: "button-left" }), h("input", Object.assign({ key: '2712744a1452a269a9cf149aaa6e6b5fc99cefe3', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: '84b4ba43c2fbbdf7b390dba0a7f0dc839626b5ed', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: 'a7134e94f657eab2c9c5156a81269712c83ec270', 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: '669a1461aedfebd1c2e66077beda1c298b77458c', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'ad5e55d3a36ade247c1508eeffe9de96df514c51', name: "tooltip" })), this.caption && (h("duet-caption", { key: '5c4bfb71d79efe8be226ba521c95c5d8fbec67de', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '4dfa6f211f3d00f6906d8e18ea9c4fdcc8ec3877', 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: 'f7811efcc2acfa5b01b1efd6d334a35c35350ca1', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'f4c6f4a8974bfca86248b528b05f84d50c73ba4c', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'b270e8b1fe5c958c76b9ba82e7c25aedf35ae710', name: "button-left" }), h("input", Object.assign({ key: 'ee3e9844d6fd27bafb895d0f08a2ce2282237024', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -570,17 +578,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.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "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.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '080395d2f4005f5e2d40ebeadf5be30fb014e71d', class: "duet-input-icon" }, h("duet-icon", { key: '2a5bfe3a6d42a97e6cf451f833deeae80d852374', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '92a1308358fff9f5c6aed1a07e24053c7499e788', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "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.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: 'f021ac46e0c9738775a03965e2c3497d80c4dced', class: "duet-input-icon" }, h("duet-icon", { key: '56bff364b7c70d530c3dd809b2a8a2f7fe1fff5b', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '7eb63087db85f1095034e2584cf4d1d4b124c82a', 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: 'b921d4ca4eb54fc267ad62f3c956a9acd9ea4487', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'bdea13847de38a2cfd7cab93aa5867dda090e8d0', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '4e49e31671b84ffbda56882870611aba296daab2', class: "duet-input-icon" }, h("duet-icon", { key: '8d95610824e317a5dd0c2a445f074a8845e118f9', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'a65627a7d986abbe186808402689fc99a08bf173', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'c1ae746e55b6cf639c28a8b510c399c390ab875e', 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: '72fb4efe7f5d0ea161c7401acb59f2b20a77adac', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f9df024692c1be597b37cedc74c8203e8fabb908', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'bca090dc2f20e1febe6674059e0a3b22c2d79d2f', class: "duet-input-icon" }, h("duet-icon", { key: '9066e27643ad85bc683cd36a5998e7bd0fcad572', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'c83a2b95a969c7f1c2f7a3915cdfce56d1c525b8', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '86fc4aaddb775f76d602b699bdc8c811f41f2561', 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: '002a8f8fcab8184f130dc007637ef24216aadee3' }, h("span", { key: 'fd669556e6e64700f4c2347183e20e6cbeb5682b', "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: 'dfa0a59d038af09b5115dae28772c108918154ab' }, h("span", { key: '00408d3c2616c8e1aa64b41503ae7760c1fd60af', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'cc9d622df88881cabca741a1dd95a162e955c349' })), h("span", { key: '31c73b30b14c89c56268c32102bb5427b9850ff1', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'b04cbeca6289a6b421013dde03381db825ac7a2c', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '3b539164f49b311fcdc82ce75cb75d360e148c4b' })), h("span", { key: '2f2f5abff72831b7257d404dfedecb8bea316762', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '63e8da0c2b2638d8af7f0b87f4e00ab5d5b7aa8c', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,24 +66,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fe098e91c7bb01e0e85f187ba546f8f0c15cf657', class: {
+        return (h(Host, { key: '53712da1e22dc258d30906570bf1271624379ed8', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: 'da78ba19b431c58d4c317488d836973313b3205e', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '6e681d77a0e10bb86b110e92d2843a41a95f57b3', class: {
+            } }, h("div", { key: '80dc2f3b86a02c22c7aebd8802bd332154c4a273', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '9f3f4c713d5b921ad78480072e3dcea4d4867d04', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: 'cb6263cad7fbb6bcd52af5be3286998c5e6f8ff3', class: "duet-layout-top-wrapper" }, h("slot", { key: 'c5c141ad0307a0c11bb7a03b5c78e45356b19945', name: "top" })))), h("div", { key: 'e524ed28fa4b2069b1bbbb3f603ba4e6101bd9b7', class: {
+            } }, h("div", { key: '7cd44f76b96b5e2bd6033cc044f08e75a10760ed', class: "duet-layout-top-wrapper" }, h("slot", { key: '7743f1fe659f31925b27a85a970e934506b935e7', name: "top" })))), h("div", { key: '637a68f8376e073f146c63f2c866b6f52722577e', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'c593638dad35304125cad8df76e2666a68c537b6', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '9bf4eb387cc838260b36ba8d14ca567dd0ab084e', name: "page-heading" }), h("slot", { key: 'afb96493e079f8eb59c1ad43746c25d5a522e239', name: "main" })), this.hasSidebar && (h("aside", { key: '0c61d31a6c40af17a4c2831ea7e441d3625b23b0', class: "duet-sidebar" }, h("div", { key: '524ea0db179272409930c635aa1faca2716f88d4', class: {
+            } }, h("main", { key: 'f6b2682dfb675be08976b23a485cf1a7ad76de0c', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '9ec618959d54d768b880f95e05df0e5aaf76de75', name: "page-heading" }), h("slot", { key: 'b3c960b48d55fb863854fc34e126b1a143b3d194', name: "main" })), this.hasSidebar && (h("aside", { key: '68671aab139ba365d60284909e489a78bd7438d3', class: "duet-sidebar" }, h("div", { key: '60a53e1fa61ccec8fa2b85f20b475c52e016b963', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '8e4836e0cc16d836afcdadf1fb31b5e8f9e81e45', name: "sidebar" }))))))));
+            } }, h("slot", { key: 'a6131a1af98bb5cf2c6c808b15cea9e6996143f3', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva, .duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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: '63ea212c967fed116f28d316bf7b4dc6f7bed88d', class: {
+        return (h(Host, { key: '7fc9958dae390b84feaddc854bf6b039d3bd00a4', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'c799db0446fbca186340c781f23ccecaf58e4336', href: this.url, class: {
+            } }, h(Tag, { key: '1d0baa8ee391bbfc51eb30936564d9e7d1a7de97', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -101,7 +101,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '8cae41f240da2961c27153dc122763812b5fa34c', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'b99b56fcc934c6a52c71df3e77d60b91393ade02' })));
+        return (h("dl", { key: '82930dea1fe1193f295b5888ed5f06a85693faaa', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '44602efe41782f5dc0221b0fe2dd2ac6dc905ae3' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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: '2fc646c6ec771484ba741b13db4e05af02190613', class: {
+        return (h(Host, { key: 'e4cd01b6b0c03f3d82beba7c85400711e49f6582', 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: 'a6f04cd679b723dec94b73f49a1f01e765cc2c2c' }, h("slot", { key: '3406e6b4499bc4e1ccbb65c8c20861a940058120', name: "label" })), h("dd", { key: '12904de4492dd50e266c323d2d038a514e4ed4f1' }, h("slot", { key: '1b5922436da8b77d4687c2fe55e7f58c5af37647', name: "value" }))));
+            } }, h("dt", { key: '9644bd50dfb2d6b45bd136bedcb6968f9a2675ba' }, h("slot", { key: 'db3550984b29dd4dad07eb4ab7d047652e83ac22', name: "label" })), h("dd", { key: '1e01b0449b667d1de8e9ba3ed9593725c5ce8353' }, h("slot", { key: 'c0662c72ff8ba3c2a13041b741b15ee1f9b0f544', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,7 +49,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva, .duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva {
+.duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -123,7 +123,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: 'c5a6f410a432651dc8201da3f23c1af4334756e2', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'a051499f4369db9483ae410d4d320b641855576a', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '31d7e480f3c9ef37d87d5af511489b235731973c', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'f280ec89b183ee99be0449f35a824b77aff8a2d0', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-logo-inverse": this.inverse,

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

@@ -132,17 +132,17 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '0465c2eb195dcbd9b168a73646321e57fdbf6ac9' }, h("nav", { key: 'f0bfcd1ec120c1471fe1d32715b6892125f03baa', class: {
+        return (h(Host, { key: 'da384aec934b8177658bc5b2ba9126dabe8b44cc' }, h("nav", { key: 'eb7dd8d958e964d1b0e5d2cf96a20a4d0c0c70dc', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'bc2ac882034c4d1ffc30fa989bf6d4927ecd50dc', class: "top" }), h("div", { key: '2495e91eb00325b4cb6d01814a13196916e62703', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '4eaa51862b000fb13b27c4abe9d4d44cc9ad2f1c' }, h("duet-logo", { key: '909c1992fd75363ff871776e4d948d295f21ee2e', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'e672f17cccb5ba665d93375746eda2427a43fd5a', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '92864cb719cd05cf81b3e1a8513179daeceaae30', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: 'bdea5133ca4fe524e4514808a1233094a4427bd7', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '4a8a38d9fd5457b716bff3252791d35eb8441aec', class: "top" }), h("div", { key: 'dfe385565d075aba16005d29790111cc51b5a464', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'd7fa21e1f8b0f3ea5eeb5eff037790a47c57be22' }, h("duet-logo", { key: '081cd1b58c97e71196ff421dbb7b1ed4f2e2278e', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '41b6ffe971ec6c9ff78c2f79834df3c9dceb3482', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '16cc7621a8d50d64d63fd7b8af07f074e30a49d0', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: '2f0bcec90b8c9f508d95fb31d8ad9904ea7bf652', class: {
                 "duet-logo-info-text": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.logoInfoText)))), h("div", { key: '05e4681d1eb7add830ec0dba6d8bf33df33e77a1', class: "list center", role: "list" }, h("div", { key: '6b29f783a3df400d7e2f8bfca9dba33321d658c6', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '938d6956b67e6a8a5592ea6f13e013a672af3f0a', name: "center" }), h("div", { key: '27897945987291e920d738a520fe16b2a82284f4', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '9cc2f6e6297e855cdac09b2a3fa5d6c3a42ecf9c', class: "list right", role: "list" }, h("slot", { key: '257a5853501bb6dde1d152842c77c4e8cd00b709', name: "right" }))), h("div", { key: '3a7b3b351b057060e8359a4acc7857fabe29ab3d', class: "bottom" }))));
+            } }, this.logoInfoText)))), h("div", { key: '0630a90a58cfcfdd4255c018db1ea172240b5611', class: "list center", role: "list" }, h("div", { key: '6e9f9d06775216dfa9ec70b2c768d5957ba67f10', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '03f6a07cf3633d2ba2c62b76d40d2f74bba6f366', name: "center" }), h("div", { key: '7baeb903a2656bb33129bac0cf6007fce4604bd1', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '8a183192d62d7040c1ab2a8a684d8a7678803436', class: "list right", role: "list" }, h("slot", { key: 'd2f48181bf06824a5901fdc37f7f9eb729460c68', name: "right" }))), h("div", { key: '3b1e931eb638ea04b5a0743d2ab03413ca220a33', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,7 +43,7 @@
   outline-offset: -4px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva, .duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva {
+.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: -4px;
   outline-color: rgba(53, 79, 101, 0.8);

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: '27fb2c633e88b04b7397830d15c881240d29a91b', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '29791cfd8473dc9407238460bcb1e169f183f074', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '0e1e537a15d9a7b7d94a2ce24a71281b4757b1d5', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'c7ab5d711a28d54af476fdf133e8f92bce25f020', 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: 'e037dac1385bef39b070602ba5bfb278470a49dd', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '95fd0aef38328dece2756ceed18c904c0c447d76' }))));
+            }, "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: '922a6e2fa015b52aac218ce9e803c75a57465310', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd85350f1fb803be4e524803b0bea4acc62f569fb' }))));
     }
     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.css

@@ -60,7 +60,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva, .duet-theme-turva .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva {
+.duet-theme-turva .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);