@duetds/components 9.17.0 → 9.19.0

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

@@ -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-right: 4px !important;
   margin-bottom: 2px !important;
   display: inline-block;
@@ -29,6 +29,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 4px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -43,10 +46,10 @@
   font-style: normal;
   font-weight: 600;
   line-height: 1.25;
+  vertical-align: middle;
   color: rgb(8, 42, 77);
   text-align: center;
   word-break: break-word;
-  vertical-align: middle;
   background: #d9ebf4;
   border-radius: 20rem;
 }
@@ -83,14 +86,14 @@
 }
 .duet-badge.subtle {
   color: rgb(98, 121, 138);
-  background: none;
   outline: 1px solid rgb(212, 223, 229);
   outline-offset: -1px;
+  background: none;
 }
 .duet-badge.subtle.duet-theme-turva {
   color: rgb(113, 118, 132);
-  background: none;
   outline-color: rgb(222, 224, 228);
+  background: none;
 }
 .duet-badge.background-strong.default {
   color: rgb(255, 255, 255);
@@ -123,22 +126,22 @@
   background: rgb(48, 131, 105);
 }
 .duet-badge.background-strong.subtle {
-  border-color: rgb(181, 198, 208);
   outline-color: rgb(8, 42, 77);
+  border-color: rgb(181, 198, 208);
 }
 .duet-badge.background-strong.subtle.duet-theme-turva {
-  border-color: rgb(199, 202, 207);
   outline-color: rgb(23, 28, 58);
+  border-color: rgb(199, 202, 207);
 }
 
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.default {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
   background: #e8eaeb;
 }
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.default {
   color: rgb(255, 255, 255);
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.subtle {
-  outline-color: #172a3b;
+  outline-color: rgb(23, 42, 59);
 }

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

@@ -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-right: 36px !important;
   margin-bottom: 36px !important;
   display: flex;
@@ -31,6 +31,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 36px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -56,11 +59,9 @@
   position: relative;
   display: none;
   overflow: hidden;
-  /* stylelint-disable */
 }
-@container duet-banner-container (min-width: 0px) {
+@container duet-banner-container (min-width: 0) {
   .duet-banner .visual {
-    /* stylelint-enable */
     display: block;
   }
 }
@@ -100,8 +101,8 @@
 }
 .duet-banner .action {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
   padding-top: 16px;
@@ -125,13 +126,8 @@
 .duet-banner.duet-theme-turva .visual .brand-shape {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
 }
-.duet-banner.size-medium, .duet-banner.size-large {
-  /* stylelint-disable */
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -164,19 +160,12 @@
   }
 }
 @container duet-banner-container (min-width: 586px) {
-  .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
-  }
   .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {
     left: 80%;
   }
 }
-.duet-banner.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 900px) {
   .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -221,32 +210,31 @@
   max-width: 720px;
   padding: 0;
 }
-.duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-    /* stylelint-enable */
     padding: 48px;
   }
 }
 
 :host(.duet-theme-turva2) .duet-banner {
-  border-radius: 8px;
-}
-:host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
-  /* stylelint-disable */
+  border-radius: 12px;
+}
+:host(.duet-theme-turva2) .duet-banner .visual .brand-shape {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22540%22%20height%3D%2258%22%20viewBox%3D%220%200%20540%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M540%2018.0729L540%2057.6749H0L0.000139455%2011.2563C0.000139455%202.85822%208.31858%20-2.59156%2015.3307%201.26796C33.6821%2011.3367%2055.6983%2020.0831%2080.3633%2027.3465C134.438%2043.276%20201.239%2052.0939%20270%2052.0939C338.761%2052.0939%20405.572%2043.276%20459.637%2027.3465C484.302%2020.0742%20506.318%2011.3277%20524.669%201.25902C531.682%20-2.59156%20540%202.85822%20540%2011.2563V18.0729Z%22%20fill%3D%22%23FBEBE1%22%2F%3E%0A%3C%2Fsvg%3E%0A");
+  mask-repeat: no-repeat;
+  mask-position: bottom;
+  mask-size: contain;
 }
 :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 }
-:host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {
-  display: none;
-}
 @container duet-banner-container (min-width: 486px) {
   :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-columns: 1fr 1fr;
     gap: 28px;
     border-radius: 12px;
@@ -256,4 +244,14 @@
     border-top-right-radius: 0;
     border-bottom-left-radius: 12px;
   }
+  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image-container, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image-container {
+    padding: 20px;
+    padding-right: 0;
+  }
+  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image {
+    border-radius: 12px;
+  }
+  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {
+    display: none;
+  }
 }

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

@@ -47,7 +47,7 @@ export class DuetBanner {
         this.getBackgroundColor = () => {
             if (this.theme === "turva" && this.backgroundColor === "primary-lighter") {
                 if (this.isTurva2()) {
-                    return "#fdf7f2"; // turva-nude-00 - not yet available as token
+                    return getColorByName("turva-nude-50", this.theme);
                 }
                 else {
                     return getColorByName("gray-lighter", this.theme);
@@ -64,6 +64,7 @@ export class DuetBanner {
         this.textColor = "secondary";
         this.size = "large";
         this.image = "";
+        this.imageAlt = undefined;
         this.sources = undefined;
         this.icon = "";
         this.headingLevel = "h2";
@@ -99,17 +100,23 @@ export class DuetBanner {
             backgroundColor,
         };
         const pictureSource = {
-            img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                loading: "lazy",
+                class: "image",
+                role: this.imageAlt ? undefined : "presentation",
+            },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'c8e3140dea20791061866feb62588c5a5491f277', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '7e6834ed607505ee35d026a71d3406280644856b', class: {
+        return (h(Host, { key: '38f57d004daf85f022fb1e8289a00d63dbe78a31', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0667b2510bdf502f24178e226897239cc0905843', class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, h("div", { key: 'fc4dc8649243b6a63368328de6eb4e50ed176a6b', class: "visual" }, h("div", { key: '37384ee4753623f1be3281d984a0bb838ed73f58', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '20843c2967598ea78d178de08e35e9ac6b913e2d' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '5004d77927bfb893d67503a452dea3e7cf74f8d3', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: 'c7a8ea6e28e80f6b10f37d3d9ae649e72362d59b', style: bannerStyles, class: "brand-shape" })), h("div", { key: '1cf3029099015dd0ff396e9f9c94075c3eb5b70f', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'bd471f924ebdcd3a08f9aed0ac669f46188a5452', class: "heading" }, h("duet-heading", { key: 'f8a595ae3eb8a76b5f2ffb245912d8dea6221873', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'cc6134c267fdc0401198afdff0a75776f091db58' }, h("slot", { key: 'bdfc9e47dfe979c9355b99379533e81e36d55ac3', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '38b1971548ed44d7b5c02c5eb6feb85625880f09', class: "description", style: { color } }, h("slot", { key: '2b8ed684179262322589d0e8702f3bd823e7614f', name: "description" }))), this.hasActionSlot && (h("div", { key: '75e5f3ba7ef02266554854f6963e4c471ca0fa4f', class: "action" }, h("slot", { key: '1c9affe286d41ac0266758465f0d574591e38b2c', name: "action" })))))));
+            }, style: bannerStyles }, h("div", { key: 'b7266d2d9986afecfc9fa233950090500ac811b4', class: "visual" }, h("div", { key: 'a3b71e01ad58dd30a19413c2daad81fc0e5f617d', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '8f687c33222c1f483c4354506729bd508c784f0f' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '884f621a10b6dfbce2073ffe2bcce6d3582d4dcd', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: 'cab35290e96c82eaee8605e89646a239de7396b0', style: bannerStyles, class: "brand-shape" })), h("div", { key: 'b05d73b8fa653e30db6e5310c017b2890ba0d572', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'b5cb84dbabf050477d224f323b18b25d26e65a42', class: "heading" }, h("duet-heading", { key: '581d34f383f4679e06407583eadeacc0e2f651b4', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '285c1d82691487108eb3e52c8df65eb495b803dc' }, h("slot", { key: 'ba3c94dfe9dfc6900d41fe31ecd716e4c08bbaaa', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'f9d06d854f0dab9e11c1945436eca5757696818d', class: "description", style: { color } }, h("slot", { key: '72d05e038ee1a75f3c2ff6d353c0cc7891f00e06', name: "description" }))), this.hasActionSlot && (h("div", { key: '6f27c979244fd9093fbe55d3fb375f7b6c18711c', class: "action" }, h("slot", { key: '82532736b2e53a5020afc769526a0b824716cd66', name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -327,6 +334,25 @@ export class DuetBanner {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "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
+            },
             "sources": {
                 "type": "string",
                 "mutable": false,

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.css

@@ -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: list-item;
   width: auto;
 }
@@ -60,8 +60,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-breadcrumb:focus {
-  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);
 }
-:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }

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

@@ -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%;
 }
@@ -143,12 +143,12 @@
 }
 
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header {
-  color: #172a3b;
-  background: #fdf7f2;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover {
   color: rgb(126, 2, 35);
 }
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }