@duetds/components 9.15.0 → 9.16.1

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

@@ -53,11 +53,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: '6e650879eddb8fcb225b17f12a41ba4836cc3fbe' }, h("nav", { key: 'ac3a235fd392e9cb00e493312526c01dfeaf4379', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: '353dc54191f3da65ebc9bbba39c9904a23ac31d7' }, h("nav", { key: '98ea70d7dba93ceda61bba1c572dc690bbb3aab9', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: '6a3d880402188ad4a7929cb0e4c8917dc60c8c4e', class: "container" }, h("div", { key: 'bb053ec6b0ae87f09f66ebeb38b2c9769e27d525', role: "list", class: "list", style: { color } }, h("slot", { key: '46d9ce4b6a18eb83f52b33067614efd6d5b798b5' })), h("div", { key: '1fbac06ea41a81f62a2574676cd1738572d17327', class: "bottom-border bottom-border--container" })), h("div", { key: 'd762fd5644e210ddcbdb2ae8f93b028254e1293b', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: 'affe18004c3a9fbdb8f820d78b3bcb08cc9bb6f3', class: "container" }, h("div", { key: 'f90581d901c83261650c3c887f332888a160858a', role: "list", class: "list", style: { color } }, h("slot", { key: '55867215483c5114bd599015847cd0ecafd7c456' })), h("div", { key: 'cbbc4775098ce98422265fbce5632be69ed916f9', class: "bottom-border bottom-border--container" })), h("div", { key: '7463cda762ef2acdb4437c88f030ee7bfcd34864', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -618,6 +618,9 @@
   opacity: 0;
 }
 
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button {
+  border-radius: 8px;
+}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
   color: #e61740 !important;
   border-color: #fbe1d1;

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

@@ -31,11 +31,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: '51d88bf47fa6dd7c93c69184bdc3bee596dddf09' }, h("div", { key: '4719f4e4bfc4ae0f11d8950c5039d290097710bf', class: {
+        return (h(Host, { key: 'cce1d247cffb8bd198d58740a8755b5905f8f321' }, h("div", { key: 'a03c534b9c6ba8bed4bcc16b1ccbc0f100219bd3', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '2a56ac7e93a32bb0c81ec60c5e1ca9f657a47726', class: "container" }, h("duet-icon", { key: '59ecda6ea09d0286d5917904ce4b9b0d47abc65a', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'c67e199bd4cef08dd3ad337f906de20ec67e0e84' }, h("slot", { key: 'bb64a939ab2e5f92e329da0af6a67fc3d5a5af07' })), this.hasAuthorSlot && (h("figcaption", { key: '29ebc5c818ede819d058a3d4e9b93d0e57fd4ecf', class: "author" }, h("span", { key: '0a61a2a2cdda4a9fa60dc8e4ba1d51a2a61ae1aa' }, "\u2014 "), h("slot", { key: '08b1248c915dfcd2c5491864e14fee6df303460e', name: "author" })))))));
+            } }, h("figure", { key: 'f085eed2d1b58950d4c208a845e412edad1deb4c', class: "container" }, h("duet-icon", { key: '50c166c27467e4ec8b0dbcd82466c9dcc33ceeaa', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'ba44180d41f337b19561e2af2e47451481c82f09' }, h("slot", { key: '9366ad783cc9af7d9a21e91b0fc9570c039a1a69' })), this.hasAuthorSlot && (h("figcaption", { key: '8fa76f3b5cf65e1ce55f97dcb23ce8b72d20e8be', class: "author" }, h("span", { key: '5f26224b4abc476e96d80f321cd5b0c38c9cdf13' }, "\u2014 "), h("slot", { key: '8b3f9ac4cb7dacf68336ce555e4ccdf2cbe8b8fa', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,6 +34,15 @@
   margin: 0 !important;
 }
 
+:host {
+  --duet-card-border-radius: 12px;
+}
+@media (min-width: 36em) {
+  :host {
+    --duet-card-border-radius: 16px;
+  }
+}
+
 .duet-card {
   padding: 20px !important;
   position: relative;
@@ -47,7 +56,7 @@
   line-height: 1.5;
   color: rgb(8, 42, 77);
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: var(--duet-card-border-radius);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
 }
 .duet-card.duet-p-0 {
@@ -234,7 +243,7 @@
   font-weight: 800;
   color: rgb(8, 42, 77);
   border-bottom: 1px solid rgb(212, 223, 229);
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--duet-card-border-radius) var(--duet-card-border-radius) 0 0;
 }
 @media (min-width: 36em) {
   .duet-card-heading {
@@ -265,7 +274,7 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {
-  border-radius: 4px;
+  border-radius: var(--duet-card-border-radius);
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-card-heading.duet-card-heading--collapsible button:focus {

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-collapsible/duet-collapsible.js

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { hasSlot } from "../../utils/slot-utils";
+import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
@@ -60,10 +60,19 @@ export class DuetCollapsible {
             if (this.accessibleLabel) {
                 return this.accessibleLabel;
             }
-            if (this.heading && this.caption) {
-                return `${this.heading}. ${this.caption}`;
+            const labelParts = [];
+            if (this.heading) {
+                labelParts.push(this.heading);
             }
-            return this.heading || null;
+            if (this.hasAfterHeading) {
+                labelParts.push(getElementsFromNamedSlot(this.element, "after-heading")
+                    .map(e => e.textContent.trim())
+                    .join(", "));
+            }
+            if (this.caption) {
+                labelParts.push(this.caption);
+            }
+            return labelParts.join(". ");
         };
         this.handleClick = (e) => {
             e.preventDefault();
@@ -115,7 +124,7 @@ export class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '54b9522f13950fe10001c1980ecdfec23220f1c9', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: 'd7e3168488798520a7df13b362a0fa6ab84b9ae1' }, h("button", { key: '6e2017e7fcee29a3b2b48e09ae796d890dc32ba6', class: {
+        return (h(Host, { key: '7d31031b7dadd4155d8a3458ec08c93c7e3cf3c5', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: 'f00b09d4646d2a5c86761675c6e46d49af9319cc' }, h("button", { key: 'a53704d19ce0908a29670199215c180996ecc898', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
@@ -123,7 +132,7 @@ export class DuetCollapsible {
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '3dc419556839dfb36da15a259587eb66d6634cce', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '567e70c640e56e3473739ab1fc3dfbcdeaf0ef98', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '957947758de386df0c50706c6b016ed6e796ee68', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'd96956f8844feb680607d625f287ddde754a29df', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '3ad9637644eb87099b51d09943921242acd1a9da', part: "duet-collapsible-after-heading" }, h("slot", { key: '0cf38df9d032614e562f056a633b986aca605e7a', name: "after-heading" })))), this.caption && (h("div", { key: '7090ce40aefd937bf3a0330677707934ce8cf68e', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'f0627546e816bbd7ba7291843f2481199b0abf16', size: "small", margin: "none" }, this.caption))))), h("div", { key: '907dceb7ee1fbcb10260b73859e6d815f336197c', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '886161d9dc199839ad5dca4f39a24d18450407fc' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'ce43b1e2dabc8910ecc4ed8484d45dca91ff4580', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '0b6b1110c4d5a265f67cd22849f3d264bab78849', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '26bc88a57fb37575d307c750fb956761f1dc4d23', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '380054a26a1ad98a8db9e5b87b1fb5e02f40d3a1', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'c1a4f4b35f20b0c6206ad22ec0789fd9fe73f0ca', part: "duet-collapsible-after-heading" }, h("slot", { key: '5d4b47626ddaba28522b080d60efd6e19d72dd57', name: "after-heading" })))), this.caption && (h("div", { key: '3fe2e63e633411be26b8f9382420922b864a09fb', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'c6e38e01e467852441c075013df51aa4e44c89a3', size: "small", margin: "none" }, this.caption))))), h("div", { key: '6dd09c8172dda9a8819f5e41d5cf84431f748bd1', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '2377257e231c64d5d8a9719d0527cd618d68c80d' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -284,6 +284,10 @@
     top: 310px;
   }
 }
+.duet-hero.duet-hero-campaign ::slotted(.duet-heading), .duet-hero.duet-hero-section ::slotted(.duet-heading) {
+  font-size: inherit !important;
+  color: inherit !important;
+}
 .duet-hero.duet-hero-campaign .duet-hero-text, .duet-hero.duet-hero-section .duet-hero-text {
   width: 100%;
 }
@@ -1813,49 +1817,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 +2056,7 @@ duet-heading + duet-button {
   }
 }
 :host(.duet-theme-turva2) .duet-hero .duet-hero-wrapper {
+  position: static;
   margin-top: 16px;
 }
 @media (min-width: 48em) {