npm - @duetds/components - Versions diffs - 9.17.0 → 9.19.0 - Mend

@duetds/components 9.17.0 → 9.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (936) hide show

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }
@@ -34,9 +34,9 @@
   font-style: normal;
   font-weight: 400;
   line-height: 1.5;
+  text-transform: none;
   text-decoration: none;
   text-shadow: none;
-  text-transform: none;
   background: rgb(8, 42, 77);
 }
 .duet-hero.duet-p-0 {
@@ -394,11 +394,11 @@
   width: 350px;
   height: 350px;
   background: rgb(255, 255, 255);
-  transform: none;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  transform: none;
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
@@ -1053,11 +1053,11 @@
 .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
   margin: 0 auto;
   border-radius: 0;
-  transform: none;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  transform: none;
 }
 @media (max-width: 35.9375em) {
   .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
@@ -1131,8 +1131,8 @@
 .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon {
   background: rgba(198, 12, 48, 0.9);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   transform: rotate(0deg);
 }
@@ -1334,11 +1334,11 @@
   height: 420px;
   margin: 0 auto;
   border-radius: 0;
-  transform: none;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  transform: none;
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
@@ -1639,21 +1639,24 @@ duet-heading + duet-button {
   width: 100%;
   padding: 16px 16px 8px;
   font-weight: 600;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.25;
   color: rgb(0, 119, 179);
   text-align: left;
+  -webkit-hyphens: auto;
+  hyphens: auto;
   text-decoration: none;
   border-bottom: 1px solid rgb(212, 223, 229);
   transition: background-color 300ms ease;
 }
 .duet-hero-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-hero-link:hover, .duet-hero-link:hover .duet-hero-action-arrow {
   color: rgb(0, 75, 129) !important;
@@ -1773,14 +1776,14 @@ duet-heading + duet-button {
 }
 :host(.duet-theme-turva2) .duet-hero.duet-hero-light.duet-theme-turva, :host(.duet-theme-turva2) .duet-hero.duet-hero-with-image.duet-theme-turva {
-  color: #172a3b;
-  background-image: linear-gradient(#fdf7f2, #fefbf9);
+  color: rgb(23, 42, 59);
+  background-image: linear-gradient(rgb(253, 247, 242), #fefbf9);
 }
 :host(.duet-theme-turva2) .duet-hero.duet-hero-light.duet-theme-turva::before, :host(.duet-theme-turva2) .duet-hero.duet-hero-with-image.duet-theme-turva::before {
   background-image: linear-gradient(#fefbf9, rgb(255, 255, 255));
 }
 :host(.duet-theme-turva2) .duet-hero.duet-hero-gray.duet-theme-turva {
-  background: #f5f6f7;
+  background: rgb(245, 246, 247);
 }
 :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
   margin-bottom: 2rem;
@@ -1932,7 +1935,7 @@ duet-heading + duet-button {
   width: auto;
   height: auto;
   padding: 0;
-  background-color: #172a3b;
+  background-color: rgb(23, 42, 59);
   border-radius: 8px;
   mask-image: none;
 }
@@ -2065,8 +2068,8 @@ duet-heading + duet-button {
   }
 }
 .duet-theme-turva :host(.duet-theme-turva2) .duet-hero-link {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 .duet-theme-turva :host(.duet-theme-turva2) .duet-hero-action-arrow {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }

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

@@ -84,6 +84,7 @@ export class DuetHero {
         this.image = "";
         this.imageSize = "auto";
         this.imagePosition = "auto";
+        this.imageAlt = undefined;
         this.variation = "default";
         this.back = undefined;
         this.listItems = undefined;
@@ -155,6 +156,12 @@ export class DuetHero {
             backgroundSize: imageSizeIsCover ? "cover" : null,
             backgroundPosition: imagePositionIsCenter ? "center" : null,
         };
+        const bgImgA11yAttrs = this.image && this.imageAlt
+            ? {
+                role: "img",
+                ["aria-label"]: this.imageAlt,
+            }
+            : {};
         const buttonStyles = {
             transform: "translateX(-8px)",
         };
@@ -191,7 +198,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '1a42c8fe01fb20e1a6cb255106032dc91c0781c0', role: "region", class: {
+        return (h("div", { key: '1fbd9962c3489ee8b3c350e99fe0b7e99a0db6f2', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -209,17 +216,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '57acc6a7f9645ff7e6c276326ffff51325fa2d4a', class: "background-area" }, h("div", { key: '841e799d7a7f515ae81804f9814643bdc059aeab', class: "background-container" }, h("div", { key: 'b2ceb38b291695ee09ca1d8af674c3108373cd0a', class: "background" }, h("img", { key: 'a3dbb066b0a473467b3968f5bc6ba2ff3bc5fdcb', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '3cf5f570be50174dbf27d73676da4dfa11b501e3', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '87611a0c4e7b473a04c6a19f32b73a641279069c', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '85f72141a126387b5e99a78f64132dd4e2d42b0a', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '5a9a357048947507f0733d4e56d04e53e301b632', class: { background: true, [this.layout]: true } }, h("div", { key: 'b341539d0d282bb53f0f162046fa0d7e6e0295a7', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '77c79dfcc391dc1656e1c0581d52f8f88e03e84a', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '8aaf9cbfd9c5e26c65aa0a104df3962529319a1c', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '32ff4ebb447a7f348fb5639d7bb79f1362959c44', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'db6bf1a9fa08d881fece8ac1e667983893250782', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '5a457fda070ace0dba61014a8030110057147ddf', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'ca6999b4fca4165fba696ad2d6f2d5d7286e7735', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'b3bae8667fd012b3a6b480962e6e77ca72b86572', class: "background-area" }, h("div", { key: '58aec435b461102c8c24a97b409f2e820fe11292', class: "background" }, h("div", { key: '31a1abf658dabc4ce7213b8c9e959d0f89975a78', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '2421d09afcabbabc03c254aea2764d269b4f1c3c', class: "brand-shape" }), h("div", { key: 'c8fc67a5b678c63007b66f3b74f2e72de7d4bd4d', class: "brand-shaped-image" }, h("div", { key: 'c87f70958459675a9e4ee1e9f97b82af4ab23cf4', class: "brand-shaped-image-wrapper" }, h("div", { key: 'a29434e7acdaf5e94816a615bd5664dfce459e02', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '1e6792a7b46cbd6889593641cceed1e7fa6545be', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '5a4a0819a41e50bab74f25a6db76ee9a3dc322a8', class: "duet-hero-image-mask" }, h("div", { key: '019c3d85ac09a32989cd461509194453ecfbc1e5', class: "duet-hero-image-wrapper" }, h("div", { key: '61ff1f6a788a631f4ad166e6a3aba17736668627', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '53694382832db2ce4beb52cca2176384aa573e3a', class: "duet-hero-back" }, h("duet-button", { key: '5b946c6c31107a9d10292c0bccb01bfd0f1d9d41', 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: '1fc3163bd1a52e8289056313c08f4697e9e2b662', class: "background-area" }, h("div", { key: 'c21f6997d31c25133dca05d1a853f7d490e60052', class: "background-container" }, h("div", { key: 'ac7a43202885742dc98a535143954c97def0a855', class: "background" }, h("img", { key: '9574406eb8ed97f0decbca4def0bf7a94529679d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'd35128a5fa6f8a7f00e8df3940a4e347822aec04', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '226c7247fe08bd694da1d594d5d0efbce3cc99cb', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '47d1811c6af96ab9536f5da9ed053b7c71c2b303', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'abbdcbf247461ae489bea75984676f6c0010d0ff', class: { background: true, [this.layout]: true } }, h("div", { key: 'd684e7a5cb272d16b0bc53a12cda860a3304b7d7', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '54d3e5d5fc433bb7ff51a5b2ab4653b11dd93789', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '8f93ff6fa715b3218549aef0837da54722630e56', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '88f93fa6f5ebd24b51f30b1214821abbf249e50e', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'd75f941bd6917dafe5dad64a5122b5058e09c4a7', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '7fbcde433ec34499af429a23038615f9d5b02849', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '5060f6dc479a54be7a91ee4f14bf133e95425514', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '22bea138a33fcceb6c25e01493300650f5060bc8', class: "background-area" }, h("div", { key: '1700e043bf84702aa49061b78e4f66f5e4ffd7ae', class: "background" }, h("div", { key: '2910c2fcb2d2a0f97814807cc00f0baafd092132', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '36edb6e5216814ff3820a0f6e0a51cfdf3f27bba', class: "brand-shape" }), h("div", { key: '68f10868f4fbfd2979e44f30ff065684b2e1762a', class: "brand-shaped-image" }, h("div", { key: 'c6d8b858f43531bbc4d2093df7d56dde145ff0ae', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'ef5bdd9d2fb65140dbe3b5842938aff51fe47c1e', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '0d0f813a8c87fc705f40d326cf04ca661b4e0345', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'c85b5f23fcfb67a8853a895d6c34bade622c4bf4', class: "duet-hero-image-mask" }, h("div", { key: '9f96a6ee0d7dbe965c4d87cf9c6042ed371511fe', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '3f91277d921ba1e24d5d1d91d9be8eb0e721230a', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '04bebe7cf9a7861063df73b4b145e23024b2b357', class: "duet-hero-back" }, h("duet-button", { key: 'aa268558b148b77731c78c8a9552f5ec44f1fb99', 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: 'f65b35a60499027f178bc1ffd29358c43a25fff5', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'b0357e61c545e38792e90376feace131901da422', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '8e08891d1f98c17a88421b49d4a8ba8b9d3ec005', 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: 'c5498af53feb8925d894ac6a1ddbe3861263e35e', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '7c10ede17b3fac92934c2226e7300604887cc2c2', 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: '8c3ab823d74238e029a1390a099e070ac54f183c', 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: 'c0f51acedd4228682c78b214a6043e0b21b50c67', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'd08af51699647880a95eab719f08d83ee610d8d4', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'f841d8d7419c13a61a9a56872304a452a09545f6', 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: '90d2f58011c697921c96233d88b7d4770a2c2375', 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: 'f941fa7b351e3e0100959168f247323e1c8149ba' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '2d248f92700a3821930d14ee88822880f5d25e48', 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: '1cc9b8391c6b969c49874c06c6cd8dfcfbec259c', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '4ff89423844a75b8297e5120796238a6e081f2e4', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '89a6e67512a31710e42bdaf18842e5f1e3d3196c', 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: '07977695a569298f04255bd459abef76a50d9b9b', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '4e142cb8344bf05edafa30facc7036014bb46f53', 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: '600e6a035d0449a6b8523dd72a5ff0c034a8524f', 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: 'df3fab2c2877e3c7d87ffaf3095741447b66a6d4', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '3a32395112fb7b7171f5dd7106df32c878148778', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'c8eac98c6f6720e21304abdc668d4b823d38de24', 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: '1ab6ba33bd362d329be7940d419d59ff91559283', 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: '1d17230b6fe08862a4572c9f3199f83ab0b7f5b5' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'c3fe5e8fcbf5a15479cc241e5a84633653842440', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: '9a66e46b6a46f6127b2b2ce07aa7cec2410e0f6a', class: "duet-hero-image", style: styles }), h("slot", { key: '4eca0efe9a6fd469214735a604a80ee11e1ecd5f', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: 'e0342b005149594372844914be95a65e39febd3f', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '7484f06d422af7427143c2d99cb97a1a79b895cc', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -764,6 +771,25 @@ export class DuetHero {
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "image-alt",
+                "reflect": false
+            },
             "variation": {
                 "type": "string",
                 "mutable": false,

package/lib/collection/components/duet-icon/duet-icon.css CHANGED Viewed

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 16px !important;
   display: inline-block;
   width: auto;
@@ -107,8 +107,8 @@
   align-items: center;
   justify-content: center;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   mask-position: center;
 }
@@ -320,13 +320,13 @@
 }
 :host(.duet-theme-turva2) .duet-icon.duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-icon.duet-theme-turva.duet-icon-has-background {
   color: rgb(255, 255, 255);
 }
 :host(.duet-theme-turva2) .duet-icon.duet-theme-turva.duet-icon-shape-brand {
+  border-radius: 16%;
   -webkit-mask-image: none;
   mask-image: none;
-  border-radius: 16%;
 }

package/lib/collection/components/duet-indicator/duet-indicator.css CHANGED Viewed

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
 }
@@ -43,4 +43,8 @@
 }
 .duet-indicator-success {
   background: rgb(29, 106, 88);
+}
+:host(.duet-theme-turva2) .duet-indicator-new {
+  background-color: rgb(230, 23, 64);
 }

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

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLocaleString } from "../../utils/language-utils";
 export class DuetIndicator {
     constructor() {
@@ -32,9 +33,13 @@ export class DuetIndicator {
         };
         this.variation = "change";
         this.accessibleLabel = undefined;
+        this.theme = "";
+    }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
     }
     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())));
+        return (h(Host, { key: 'ca297bcbf550d281e420d713ca331510d31998d1', class: { [this.theme]: true } }, h("span", { key: 'b4050666cf945dec5929e5130bb83c2f21b6ae6b', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: 'f0ebcdff7f5413f8ac61618dd7873f6626769091' }, this.getAccessibleLabel())));
     }
     static get is() { return "duet-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -94,6 +99,32 @@ export class DuetIndicator {
                 "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }