@duetds/components 9.15.0 → 9.16.0

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

@@ -188,11 +188,11 @@
   transform: scaleX(1);
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva {
-  background: rgb(245, 247, 250);
+  background: rgb(255, 241, 241);
   border-color: rgb(198, 12, 48);
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover {
-  background: rgb(222, 224, 228);
+  background: rgb(255, 213, 215);
 }
 .duet-chip-container .duet-chip-popup-disclosure {
   padding-right: 4.5px;
@@ -206,7 +206,7 @@
   border-color: rgb(240, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva {
-  background: rgb(245, 247, 250);
+  background: rgb(255, 241, 241);
   border-color: rgb(245, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon {
@@ -328,14 +328,14 @@
   border-color: #e61740;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked {
-  background: #fbe1d1;
+  background: #fdf7f2;
   border-color: #e61740;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked:hover, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked:hover {
-  background: #d8ae96;
+  background: #fbe1d1;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-popup-open {
-  background: #fbe1d1;
+  background: #fdf7f2;
   border-color: #b2c2cd;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input:hover {

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

@@ -18,11 +18,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: 'd29491eace218119aab4bb8742a44ef92ea3e377', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '3d5882eeb89eec6debf9ac38c167335fca22c65b', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '2745649a462f339b630a4a46ea314c89c91dbe52', class: {
+        return (h(Host, { key: 'ac5830102d190e3315b4798b50f042d285f600f4', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '35f0f3e407a0835d5d29eff77793ca6d9e5c5744', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'f6fe02c597eb1264d6135b30933c371208426ad0', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '910ba85c8709d99174d0a0c6a5208fccdfe9456e', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '7b23a08c03ac673e9ff0b969793df4f055ac4341', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -204,19 +204,19 @@ input:focus {
   outline: 0;
 }
 
-:host(.user-is-tabbing) input:checked:focus + .duet-choice-label {
+input:checked:focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3);
 }
 
-:host(.user-is-tabbing) input:not(:checked):focus + .duet-choice-label {
+input:not(:checked):focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 
-:host(.user-is-tabbing).duet-theme-turva input:checked:focus + .duet-choice-label {
+.duet-theme-turva input:checked:focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2);
 }
 
-:host(.user-is-tabbing).duet-theme-turva input:not(:checked):focus + .duet-choice-label {
+.duet-theme-turva input:not(:checked):focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 

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

@@ -45,10 +45,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '5e0b606ff3d78d1d6496ec02de6f5b5a0bf5121a', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '326fff7243be5a6fe726d2dd958a407facbc2ba6', class: {
+        return (h(Host, { key: '031a1cc6617901d47c4ffa723e7e5af73a11b609', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '3eadcbaad47c4fced83d4db168810f79bfa7b786', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '66d4f7fe8b7ee4c0832c2cd6083adae45e452d56' }, this.name && (h("duet-heading", { key: '2ee8e38b16b69e30bdae8b2e567a0fa321591349', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'c27dd3836821a7e44b31feb1ee6c281fc0d9fa9c', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'f89f4e94e9519798954104f934b59b0860552088', class: "email" }, h("duet-icon", { key: '8ddd1c63f78947b491ca0e3ae1e2b4378defaa53', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '3ef856aead9f3a024cc8b9d5070ec380e22dd01f', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'a4a434ffa32b6bc202d8b766aaa094d5956fb50d', class: "phone" }, h("duet-icon", { key: '685ab55882de242d23455e17445351846b8aa69b', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '8647d8c2842a401007dff5bda3d3941f90c8957a', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'c57ab6d37ed120444703dafae51afc47d7dab9ab', class: "call-to-action" }, h("duet-button", { key: 'e6192686bf25181fcdfca4bccab5af1d6b99fa62', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '59a0888e641e778ff33a97a120914ceb7e35f80f' }), h("slot", { key: '8a48a71e6d41bbbcfcc662b840a8909e464a592c' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '54b585ba0d7820ddc0170b050d7b2fc1160fc559' }, this.name && (h("duet-heading", { key: 'b6ff67b0d0a8a8443a2318de87068aa15f080774', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3586614b97c27b190bd6cf657970e3fd54999733', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'f28904a0807287b25d77dabd04d62e3db9dd9885', class: "email" }, h("duet-icon", { key: 'f51b5fe58a74b65433172d96c921aebd5cd046f0', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '84014fd0fa9c758aa002751e780a876b1acf14cd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '97814f25bbd4afa0c0449a22b09a72803717aaca', class: "phone" }, h("duet-icon", { key: 'e6775a6b8eadfe789170d5a896a225c5d2736bab', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '61cd5ffd1d0850313af726624b8207cec0f3732f', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'dbe676faf77918b470a549472baa29d249a86ac1', class: "call-to-action" }, h("duet-button", { key: '294a9d190cdeba8cd13efc1d0f68aef675470c4b', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '0319211fcb9e7f11dd5b32a53a1c57436ed79268' }), h("slot", { key: '0ffb08aec4351a29a0cd3ccd25911f3271cb4058' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,20 +49,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b8619c958091052111b38b30a4b2d21aba5aa128', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '2abbbe4d836d366658e307ae8959e38fbba7f809', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '083178e4b5c3ef208a7d20c1e29ccd67ae436a1e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '371ad27e2db160c7f6c4711a80ad237d8aa59b46', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '971a82ae56dc2d3b312222d7690903a1561b573b', id: this.labelId }, h(this.labelHeadingLevel, { key: '01a0d519b11e5255c9dceb12ed346ee2a69a5988' }, this.label), this.caption && h("span", { key: 'bcd38310da2d41495e5a0a9f14397277f9c19518' }, this.caption)), h("div", { key: '917f12cc08216b73edb5d390d2adb4dc60e67c83', class: {
+            } }, h("legend", { key: '6de5ea55ae42baf9675b44f521736892ea4b8e35', id: this.labelId }, h(this.labelHeadingLevel, { key: '664e33dc98e540a2643f8cc3098e6f9a7d565090' }, this.label), this.caption && h("span", { key: '53689d2f323c13e68fc48e8fc4a641dd210c6761' }, this.caption)), h("div", { key: '3a03e91ea4d9603fc9f91f1edba19cb07f63b36f', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'bb9869ccdd739a3e16319bfc92153073dd2b924a', class: "duet-fieldset-label" }, h("span", { key: '700fd555d3c6725de4a81d5a8be5eea99d571c31', "aria-hidden": "true" }, this.label), h("slot", { key: 'fa5a11572a5a47c5f50358c0382913c347557fd7', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1d693a77fbac816f444ac82b84cadf53d13f99b5', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '9982e1b3a570edb5a2505edca6ef1a6ca074c226', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'e4ea0a8b3b0089a3a2aba2576b218f4f28f6ddc1' }), h("span", { key: '610ca7a9f4159cf2e5b39618deec8c6d3ce18f5e', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '67546da26bbd68b8b47d70c4dd5da77a4d144b2b', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: 'daa5af05aa9b131aa9cc56f1b6268cb4ea05d847', class: "duet-fieldset-label" }, h("span", { key: '87309ad8a81cae6cf99e7a2782c493f0de4fd73c', "aria-hidden": "true" }, this.label), h("slot", { key: 'f94b32bb98a136b08901468961f2df0018907e76', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '8d1d958991d27bada3452873155619968813aef4', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'eb614cbb4ce3ce64f5e42cb31dfd106002ec5d2d', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '8385bd2d465d37b3c01eade80dd800b6e0ff880c' }), h("span", { key: 'b22a8dca8b5bccde89451e2153c25d4006826057', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '9673648ce6bfd6d71f16870e62f4551f00a087df', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,10 +23,11 @@ export class DuetGrid {
      * @returns {number}
      */
     outerHeight(element) {
-        const height = element.offsetHeight, style = window.getComputedStyle(element);
-        return ["top", "bottom"]
-            .map(side => parseInt(style[`margin-${side}`]))
-            .reduce((total, side) => total + side, height);
+        const height = element.offsetHeight;
+        const style = window.getComputedStyle(element);
+        const topMargin = parseInt(style.marginTop);
+        const bottomMargin = parseInt(style.marginBottom);
+        return topMargin + height + bottomMargin;
     }
     debounceWindowResizeHandler() {
         debounce(this.updateGridItemsWithInputFields, 100);

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

@@ -1813,49 +1813,235 @@ duet-heading + duet-button {
 }
 :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .background-area .brand-shape, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .background-area .brand-shape {
   background-color: rgb(255, 255, 255);
-  border-radius: 48px;
+  border-radius: 24px;
   mask-image: none;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .background-mask {
-  background-image: none;
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-height: auto;
+  padding-top: 0;
+  padding-bottom: 72px;
+  margin: 0 auto;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-image {
-  border-radius: 26px;
-  mask-image: none;
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product {
+    flex-direction: row-reverse;
+    gap: 40px;
+    padding-top: 72px;
+    padding-right: 56px;
+    padding-left: 56px;
+  }
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-image::after {
-  position: absolute;
-  bottom: 0;
-  z-index: 1;
+@media (min-width: 76.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product {
+    max-width: 1110px;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area {
+  position: relative;
+  height: auto;
+  overflow: visible;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+  position: relative;
+  top: 0;
   width: 100%;
+  height: auto;
+  aspect-ratio: 576/250;
+  padding: 0;
+  overflow: visible;
+  /* stylelint-disable max-nesting-depth */
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+    height: 250px;
+    aspect-ratio: auto;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+    padding-right: 28px;
+    padding-left: 28px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+    height: auto;
+    aspect-ratio: 53/32;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background {
+  position: relative;
+  top: auto;
   height: 100%;
-  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22530%22%20height%3D%22136%22%20viewBox%3D%220%200%20530%20136%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M530%2018.0108V320.699H0V11.2176C0%202.8484%208.16439%20-2.58266%2015.0467%201.2636C33.0582%2011.2977%2054.6667%2020.0141%2078.875%2027.2525C131.948%2043.1273%20197.512%2051.9149%20265%2051.9149C332.488%2051.9149%20398.061%2043.1273%20451.125%2027.2525C475.333%2020.0052%20496.942%2011.2888%20514.953%201.2547C521.836%20-2.58266%20530%202.8484%20530%2011.2176V18.0108Z%22%20fill%3D%22%23E61740%22%2F%3E%0A%3C%2Fsvg%3E");
-  background-repeat: no-repeat;
-  background-position-y: bottom;
-  background-size: contain;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-icon {
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .background-mask,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .background-mask {
   display: none;
-}
-:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background .background-mask {
   background-image: none;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-content .brand-shaped-image {
-  border-radius: 26px;
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
+  position: static;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
   mask-image: none;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-content .brand-shaped-image::after {
-  position: absolute;
-  bottom: 0;
-  z-index: 1;
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg {
+  position: static;
   width: 100%;
   height: 100%;
-  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22530%22%20height%3D%22136%22%20viewBox%3D%220%200%20530%20136%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M530%2018.0108V320.699H0V11.2176C0%202.8484%208.16439%20-2.58266%2015.0467%201.2636C33.0582%2011.2977%2054.6667%2020.0141%2078.875%2027.2525C131.948%2043.1273%20197.512%2051.9149%20265%2051.9149C332.488%2051.9149%20398.061%2043.1273%20451.125%2027.2525C475.333%2020.0052%20496.942%2011.2888%20514.953%201.2547C521.836%20-2.58266%20530%202.8484%20530%2011.2176V18.0108Z%22%20fill%3D%22%23E61740%22%2F%3E%0A%3C%2Fsvg%3E");
-  background-repeat: no-repeat;
-  background-position-y: bottom;
-  background-size: contain;
+  background-position: 0;
+  background-size: cover;
+  transform: none;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
+    border-radius: 0 0 12px 12px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
+    border-radius: 12px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+  top: auto;
+  right: 20px;
+  bottom: -16px;
+  width: auto;
+  height: auto;
+  padding: 0;
+  background-color: #172a3b;
+  border-radius: 8px;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
+  top: 0;
+  width: 62px;
+  height: 62px;
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+    right: 40px;
+    bottom: -24px;
+    padding: 8px;
+  }
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
+    width: 80px;
+    height: 80px;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+    right: 68px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+    right: 40px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-text {
+  width: 100%;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .duet-hero-wrapper {
+    margin-top: 28px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .duet-hero-wrapper {
+    padding: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content {
+  padding: 0;
+  margin: 20px auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content.duet-hero-narrow .background-area {
+  max-width: 888px;
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content.duet-hero-narrow .background-area {
+    padding: 0 48px;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content.duet-hero-narrow .background-area {
+    padding: 0 72px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+  position: static;
+  padding: 0 16px;
+  margin: 0 auto;
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+    padding: 0 28px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+    padding: 0 56px;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+    max-width: 1110px;
+    padding: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background {
+  position: static;
+  height: auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .background-mask {
+  display: none;
+  background-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .brand-shaped-image {
+  position: static;
+  width: auto;
+  height: auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-wrapper {
+  width: auto;
+  height: auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-bg {
+  position: static;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 5/2;
+  background-size: cover;
+  transform: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .brand-shaped-image {
+  border-radius: 12px;
+  mask-image: none;
 }
 :host(.duet-theme-turva2) .duet-hero.duet-hero-content .duet-hero-wrapper {
   margin-top: 28px;
@@ -1866,6 +2052,7 @@ duet-heading + duet-button {
   }
 }
 :host(.duet-theme-turva2) .duet-hero .duet-hero-wrapper {
+  position: static;
   margin-top: 16px;
 }
 @media (min-width: 48em) {

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

@@ -102,11 +102,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: 'e3c5b8a95b66d10d648b3dcb13c8a914a797b164', class: {
+        return (h(Host, { key: '323b9a59455b17f17fc41a099f1bda25cf20e2a6', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '64fb78e9ff14dade6c8a57e7e0b0c9eda9faa5f1', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '5d2f53d911f504db29bddf57c8f94f17f0415c50', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -115,7 +115,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: 'c58b6751f605b678b535275abd7ec18dcd22ce32', "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: '49d01cd51bccebb54d3c4bc9e236d27ca3ba16ac', "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.css

@@ -0,0 +1,46 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+}
+
+.duet-indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.duet-indicator-new {
+  background: rgb(0, 119, 179);
+}
+.duet-indicator-change {
+  background: rgb(247, 178, 40);
+}
+.duet-indicator-error {
+  background: rgb(185, 16, 74);
+}
+.duet-indicator-success {
+  background: rgb(29, 106, 88);
+}

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

@@ -0,0 +1,101 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+export class DuetIndicator {
+    constructor() {
+        this.defaultLabels = {
+            new: {
+                fi: "Uutta sisältöä",
+                en: "New content",
+                sv: "Nyt innehålle",
+            },
+            change: {
+                fi: "Muuttunutta sisältöä",
+                en: "Changed content",
+                sv: "Ändrat innehålle",
+            },
+            error: {
+                fi: "Sisältää virheen",
+                en: "Contains error",
+                sv: "Innehåller ett fel",
+            },
+            success: {
+                fi: "Onnistunut toiminto",
+                en: "Completed successfully",
+                sv: "Lyckad åtgärd",
+            },
+        };
+        this.getAccessibleLabel = () => {
+            return this.accessibleLabel || getLocaleString(this.defaultLabels[this.variation]);
+        };
+        this.variation = "change";
+        this.accessibleLabel = undefined;
+    }
+    render() {
+        return (h(Host, { key: '068dfb1142e610afba3d6a0bb44cc50d5af2e0be' }, h("span", { key: '95dda3401969956579bb40c3de9a33be2390f7b8', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: '1e6483d4032eb771fc01507692a92bcc962f346a' }, this.getAccessibleLabel())));
+    }
+    static get is() { return "duet-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IndicatorVariation",
+                    "resolved": "\"change\" | \"error\" | \"new\" | \"success\"",
+                    "references": {
+                        "IndicatorVariation": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-indicator/duet-indicator.tsx",
+                            "id": "src/components/duet-indicator/duet-indicator.tsx::IndicatorVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variation of the indicator. Typically \"change\" and \"new\" are used; \"error\" and \"success\" should be used\nonly in special cases, as errors and succeses normally require a more prominent message."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"change\""
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for users of assistive technologies. This component has sensible defaults, but they can be replaced with this\nproperty."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-label",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -1205,7 +1205,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use maxlength to specify the maximum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+                    "text": "Use maxlength to specify the maximum length of the value that can be entered."
                 },
                 "getter": false,
                 "setter": false,
@@ -1224,7 +1224,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use minlength to specify the minimum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+                    "text": "Use minlength to specify the minimum length of the value that can be entered."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -43,24 +43,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '376bffdd22734d1e233f8a906270acc682a0db52', class: {
+        return (h(Host, { key: '87e9a0ec222dde241b22ad453c4ad5c32634396b', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '5437c66a202aaf3458e53f23eaba2d02801c880c', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '8ecf0ad715d8bc1443fd9f67d67d6b449efae927', class: {
+            } }, h("div", { key: '7c2ed9191f4798b3dc85cf376981c6aab0156cf9', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '0cabad8796c6b6f8d6f9be773432bf8dafdd9e8c', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '1e2286c3ea76089553cc640991f53948fe76f503', class: "duet-layout-top-wrapper" }, h("slot", { key: 'dd52cd74039333a2b0e8999607bfb0915f79b0e0', name: "top" })))), h("div", { key: '1c84e875cb4e7cb26f1f5aff42e48d74fbdd9d6b', class: {
+            } }, h("div", { key: '0005e877722cc066af4afc437d27b800853e6a2e', class: "duet-layout-top-wrapper" }, h("slot", { key: 'f28942644fd863ec25dee20ff7c8e08aa4435de5', name: "top" })))), h("div", { key: '0dfab5135c2abf87bf34ad30ae694032fb15e1c5', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: '3fb3163e1e05265a89670331ea7f86181891eb2b', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '69225380f33a6e6499d8097f1019554d5b349c6b', name: "page-heading" }), h("slot", { key: 'b0ca93c6015b2d8912c7e2eaddb665c9e7f18619', name: "main" })), this.hasSidebar && (h("aside", { key: 'd63d88c4cfba1e62c2f18502fbd6da81be905d9d', class: "duet-sidebar" }, h("div", { key: 'c94f8fe0a8269aae4a410790cf72ec620b1c5c28', class: {
+            } }, h("main", { key: '52f379352c3c1bff9858834461fcbb349387867d', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '4d471586d15b6d703968a1cefa19179015e53287', name: "page-heading" }), h("slot", { key: '861e391f79cafcd371bc7a8a4e534949f5395ff4', name: "main" })), this.hasSidebar && (h("aside", { key: 'ea094960d960bea590d79e8ca676fa985bae192c', class: "duet-sidebar" }, h("div", { key: '6991b9d89cad949aab416c29ea2ace9819bf9980', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '91b0c48b39c04a2546814d246a9828d442abea0f', name: "sidebar" }))))))));
+            } }, h("slot", { key: '7d400650d3a268f363d9ca9ec8d358e1e717051e', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }