@duetds/components 10.0.0-alpha.21 → 10.0.0-alpha.23

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

@@ -1216,4 +1216,73 @@ button {
 }
 .duet-header-multi-level .duet-theme-turva .duet-header-multi-level-utils .duet-header-dropdown .duet-header-dropdown-content {
   background: rgb(245, 247, 250);
+}
+
+:host(.duet-theme-turva2) .duet-header.duet-theme-turva {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-top {
+  border-color: #d4dde2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-top .duet-header-region {
+  border-color: #b2c2cd;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-bottom {
+  background: #fdf7f2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-button:not(:hover) {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-items .duet-header-item:not(:hover) {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-items .duet-header-item.active {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-items .duet-header-item.active::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-hamburger .duet-header-bar {
+  background: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-toggle::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-toggle.active,
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-toggle.active:hover {
+  border-bottom-color: #f5f6f7;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fdf7f2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item) {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):hover {
+  background: #f1cab2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
+  background: #f1cab2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-skip {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-header-multi-level .duet-theme-turva .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fdf7f2;
+}
+:host(.duet-theme-turva2) .duet-header-multi-level-nav .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content {
+  background: #f5f6f7;
+  border-color: #d4dde2;
+}
+:host(.duet-theme-turva2) .duet-header-multi-level-nav .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-toggle.active {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-header-multi-level-nav .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) .duet-header-multi-level-nav .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a.active {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-header-multi-level-utils .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content {
+  background: #f5f6f7;
 }

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

@@ -266,4 +266,8 @@
 .duet-heading.duet-semibold, .duet-heading.duet-theme-turva.duet-semibold {
   font-style: normal !important;
   font-weight: 600 !important;
+}
+
+:host(.duet-theme-turva2) .duet-heading.duet-theme-turva {
+  color: #172a3b;
 }

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

@@ -58,7 +58,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: 'ab8059451f595067017c1bd6f9143178dabcc853', class: {
+        return (h(TagName, { key: '2a16d1cb80380aed37b1ed878ec5dce7081a2bbf', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -69,7 +69,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: '33f7263794601ca98dc99215207bad0ced17de49' })));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: '195a5b29f298c0abb79e37b308559cf65203c13c' })));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1766,4 +1766,21 @@ duet-heading + duet-button {
 
 .duet-hero-pre + duet-heading {
   margin-top: 0 !important;
+}
+
+: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);
+}
+: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;
+}
+.duet-theme-turva :host(.duet-theme-turva2) .duet-hero-link {
+  color: #e61740;
+}
+.duet-theme-turva :host(.duet-theme-turva2) .duet-hero-action-arrow {
+  color: #e61740;
 }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
+import { checkNamedSlotElement, getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -149,6 +149,32 @@ export class DuetHero {
             }
             this.emitChange(ev, data);
         };
+        this.getPreHeadingText = () => {
+            if (this.preHeading) {
+                return this.preHeading;
+            }
+            if (this.hasPreHeadingSlot) {
+                const slotContents = getElementsFromNamedSlot(this.element, "pre-heading");
+                return slotContents.map(s => s.textContent).join(" ");
+            }
+        };
+        this.getHeadingText = () => {
+            if (this.heading) {
+                return this.heading;
+            }
+            if (this.hasHeadingSlot) {
+                const slotContents = getElementsFromNamedSlot(this.element, "heading");
+                return slotContents.map(s => s.textContent).join(" ");
+            }
+        };
+        this.getAccessibleHeading = () => {
+            const preHeadingText = this.getPreHeadingText();
+            if (!preHeadingText) {
+                return null;
+            }
+            const headingText = this.getHeadingText();
+            return `${preHeadingText} ${headingText}`;
+        };
     }
     /**
      * Component lifecycle events.
@@ -244,7 +270,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'f257142549f96ec7a2bc7b55d2a94db30255fda0', role: "region", class: {
+        return (h("div", { key: '050542b6acfc853e803793b7ce454506a9c485d4', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -262,17 +288,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: 'a0ba1d5fd6f3f34801d8414e83861224fd5e59ef', class: "background-area" }, h("div", { key: '9a63de55091585f7b293848d95866486b5f6bea2', class: "background-container" }, h("div", { key: '4d33ed0f59978f56e9125a39a1deb7f87bcee57f', class: "background" }, h("img", { key: 'd7f5cc1eeb1bce111f0a88e58f920281da590b5d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '0d3008474a17986da34f5ba31dc8be1564c82783', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '1b8f2936dd72a822d49a7233b565e8ea48ebdd2d', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '229b3c5552e4d81eafe28b94b5fcec63ee60670d', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '3b8e2aee66245f324c426c240143b96a99b8e9ca', class: { background: true, [this.layout]: true } }, h("div", { key: '7d5f3a207b65d18034fbec1d9f368b1f6ee99218', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '77ccfe53bf8deb878b44891a6d5c75f33189144d', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '5d6bd03904ac0d45359b892b1e726adf994bf3c4', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'bd0ad4df2ca91ed8d331bdb8edd03ea6969f0c91', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '72d4659196b1861f52fcf0f89e8de980d6bb0bf0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'a65fe28b15facb9ccd2b7e5efee8706563b6616b', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'b720cd36ac4d5ed3fc933a7cb1cbb1c568a624e8', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '0e15cd2a65dbe97bb5739fbfd750e08fbc22efc7', class: "background-area" }, h("div", { key: '00ac94552b4d687692b3b4022e3e999bb142056f', class: "background" }, h("div", { key: '6d8fa037c5bff6784c8365f7b80ae04c431f6a76', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '923fc35eec5ec58405f7aaf2ac7d2c2e3285fb4f', class: "brand-shape" }), h("div", { key: '1cef468ea49ef89bb095d8d33d7af1133edfe110', class: "brand-shaped-image" }, h("div", { key: '450b2f27e16145aa148bc9acbb2d2881de110013', class: "brand-shaped-image-wrapper" }, h("div", { key: 'cf4f3d1aa4f738b0122fad2ffec9bdf96c0bce67', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'f8a47ed4de939d4731214996232a125a8447eb57', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '39e087e5cc31c4e2a027f2c26176724895477056', class: "duet-hero-image-mask" }, h("div", { key: '05a38f40913d646a60f91d200ef8e15c109ba99f', class: "duet-hero-image-wrapper" }, h("div", { key: '64a89962f4e3566ff396f9f16037952461f2b0d7', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '6d3d2474cadf286c387403671599e6538d3cf9b1', class: "duet-hero-back" }, h("duet-button", { key: '4e77d833102623cf2b354537b6b9f87ab764eaa2', 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: 'db9f7d160ebee968dca3e4efead01b0af6288043', class: "background-area" }, h("div", { key: 'c0bf3537b54cc4d8b04b72360be1bc922b887c0d', class: "background-container" }, h("div", { key: '39f9c4466c54b54fce2f8ea33c9163a4ca5a8cf1', class: "background" }, h("img", { key: 'bc5aefeac085a2f758668ec48b3ffd4d313b43a5', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '296411aa792beefc76a425f5b39f16f39486c5c2', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '7f53ee027d3b917a9bc5284dbb152ae96ab034ad', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'e5119c084fc6b292252a111c4acb3e2ea6c6cd77', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '3faf62ed852d07e8458c379a06ed3cfd3ca3fafb', class: { background: true, [this.layout]: true } }, h("div", { key: '43b7df5d771099f7c819c23c820b18fb053b67f0', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '3ac9ab64a699f79eafe749c027383f7753437805', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '2bd54c40138a7a732cf0bae9a5b57137a3cfded4', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '63a9404b8e42499bcd15bacdca4658931c49fbcc', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '038c455f20502c4600208d6a4e31a8dabd9b7799', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '9b5e7df86df015dbabfaff2fc4f37c1c54f82cd3', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'd9ab558d532f77eca798e2998ba5cd592881f03a', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'fe41770dc2aa046b1f7eeb76ac8d77dd0ff964cf', class: "background-area" }, h("div", { key: 'a1821e7ecd479f6d5e78d30aa60b9eaca214de30', class: "background" }, h("div", { key: '37093f57801077d47fc4da19453b47979039d1f5', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '6c2ca91302a3ddccfc3f61043d660d5c86ef2bd6', class: "brand-shape" }), h("div", { key: '5e862b201459878273988077df6fe7d10abcbf55', class: "brand-shaped-image" }, h("div", { key: '915e7aed1c7561bb280156e72b7b03fc6f711c81', class: "brand-shaped-image-wrapper" }, h("div", { key: 'abcbf26a40434f3470ef7576b3f342dcd6e75081', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '8b81e3958219408f71b8c7a53b325097f9d95c0c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'cba83e5423eae68e909b4ca76af31aa2ad621b0b', class: "duet-hero-image-mask" }, h("div", { key: '7b6f261e94a3233c4254a729c94196e0c6f27324', class: "duet-hero-image-wrapper" }, h("div", { key: '7e8b9202b8ffe7b6e5f91b432ec68dd3272789bd', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '2623bba361537fb8e0c7103ad62b76cd25e33388', class: "duet-hero-back" }, h("duet-button", { key: '1e4c727a46d6554826d3e30653244c1a51162b92', 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: '8069d1d43db52a1ccc41bf283c4659c03761392b', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '9aadf0c2ee516c9f4f37a41e340b115fc539d99d', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '10b4c3254d59c69843c27095bef45950ea49fddd', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '68247fb226b12dd8e2141e2a7b8b63f8276ba8ac', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'a16fdad82bd4ebd4c6858ab4f5bd92122623b407', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '80b8ec3ec3dd54c2041bc2282c4676e0b4eb63a4', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'b4b6f35e0393cb5981c1f8f41be47866e21d7c13', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'de42a54944a83f5d8d18eafbc75a31852d8ba375', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '725ba3215c20f61dab481e4727ee64a2ba604fa4', 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: 'c87f70f6e3116d72fb5eb1041e2f5d698665c604', 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: '644f0119c10be1fb8b4c741703203307fac76fe7' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '35e6c2c19c28662be697b4fbfa701a8f1c930fb8', 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: 'b3222a455e2be4304240b213ec34ff9a8254511d', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '1f369768e19771c9d962558704707072c355577f', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '319f24f87d1adfa4840e1b3c4adfa9e5a4efdbcc', 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: 'cab3fd5560e97bdaa5e7da9833bebdb1b58c77aa', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '070825e4bae09477947bc840a07df3a49f72cda3', theme: this.theme, level: 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: '593ff167e8e2027765467078c3a8e7fb6478a0f2', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'b0dfe6f310419cd5129b6419c2f98fcee3510439', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'e4f7966e4118c83e518b170818e0a07b8bff8f0c', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'c50112688f95b19886481c47f6158f9ce5a73dc0', 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: '1d9a44bd408aad6ed6f7571660b6284a2622c9ee', 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: '6409f66cd66a04c3720b95444ca4354e1927bf92' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '8103af21642ae0c19bb00cf2918afe83bca217ac', 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: '4e4b7dfb82883d5ff581b7f94abad8894222b241', class: "duet-hero-image", style: styles }), h("slot", { key: 'd8ea8f05d57854169d1f991fc28f10735bff38ed', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '2e854294f691337a3683daa831b498bdcdf56945', class: "duet-hero-image", style: styles }), h("slot", { key: '21cb460439eddf5f9a251722b9c6c3b3864a701d', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -317,4 +317,11 @@
   width: 144px;
   height: 130px;
   padding: 0;
+}
+
+:host(.duet-theme-turva2) .duet-icon.duet-theme-turva {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-icon.duet-theme-turva.duet-icon-has-background {
+  color: rgb(255, 255, 255);
 }

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

@@ -144,11 +144,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: 'cf31c647893de38fbf76528f89e04a6ddf0c6aed', class: {
+        return (h(Host, { key: '8c71cfdee48ff45d0e1bb65c133ed33cceb1a9f3', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '4fd35914dddff28bc3173617b0658a62682d4710', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '109821efbfa23ed2d50c72bfb036f900eae08f01', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '7c643f42d59572d41c5a076bd94c3a56eaf5eac6', "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: '5c14e77686beeca052caed3777bab1e55676d010', "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-input/duet-input.css

@@ -200,14 +200,41 @@ duet-caption:not(:last-of-type) {
   opacity: 0.75;
   transition: none;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-xx-small button {
+  top: -12px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-x-small button {
+  top: -16px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-small button {
+  top: -20px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single button {
   top: -48px;
   right: 0;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-xx-small button {
+  top: -36px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-x-small button {
+  top: -40px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-small button {
+  top: -44px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double button {
   top: -24px;
   right: 12px;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-xx-small button {
+  top: -12px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-x-small button {
+  top: -16px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-small button {
+  top: -20px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-button button {
   top: -24px;
   right: 0;
@@ -596,4 +623,47 @@ duet-caption:not(:last-of-type) {
 .duet-input-container.has-chips .duet-input-relative .duet-input:focus, .duet-input-container.has-chips .duet-input-relative .duet-input:hover {
   border-width: 0 !important;
   box-shadow: none !important;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input-icon {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input {
+  color: #172a3b !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input::-webkit-input-placeholder {
+  color: #7891a4;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
+  color: #b2c2cd;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input:-moz-placeholder {
+  color: #7891a4;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus::-moz-placeholder {
+  color: #b2c2cd;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input:-ms-input-placeholder {
+  color: #7891a4;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus:-ms-input-placeholder {
+  color: #f1cab2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input[disabled] {
+  color: #172a3b !important;
+  background: #f5f6f7 !important;
+  border-color: #f5f6f7 !important;
+  -webkit-text-fill-color: #172a3b !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus {
+  border-color: #172a3b !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus + .duet-input-icon {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input-variation-button-left.has-focus .duet-input-relative {
+  border-color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-input-variation-revealable.has-focus .duet-input-relative {
+  border-color: #172a3b;
 }

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

@@ -528,7 +528,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '2698c40b636f52bb2104c74a23ecd3925237c054', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'bebef7a5a7b57492709f43d983797ab2d529e58b', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'fc6a07da8c902900e1397d79ae1e859942a6f5b1', class: {
+        return (h(Host, { key: 'b937912982c9ab26076a7a8ef6d92d86721f1e52', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'f2c5263ad8bdc5420c0a57bb0de0257172dce64a', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'fc9419ac20d284a2d74922a41f66e6457ce2f68d', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -542,7 +542,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: '687127884e9d9cd0e7ad8154ce6c0463fb8869f0', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '827c2edbdd377574a39ccb5c7c29896b6f714610', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'a9ece9536b308ac98eec27d357da3c33c3123516', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '4a75b1054494551f2056f54e6510769487e8c069', name: "tooltip" })), this.caption && (h("duet-caption", { key: '9bb76c5948b33b1f7a631aa9dc8de48599852b27', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '7a99e9a28efe7d5d497d6ab9a35a9ebfdb27229b', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '9b75f9744d1ed4e373b76ac8ac39e86078085ea0', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '826f0a81b9e67c9729f91e80b9e63c367c0cb57b', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '9c6b58e34e2195b5a6bf4cd65b4abff5eeb63a7d', name: "button-left" }), h("input", Object.assign({ key: 'ac9d982d0fde21d818cabfd0852a8c6f70a6eecb', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: '42a3f546f411b3179ed4224d0c1847be2cb4bd17', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '50f07e14449aa88f4f8f67b5c21fb23c435b318c', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '9161fff80a689ae4fa7fa7bc4532fef2b48cf8c7', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '17c98bf119774ef6606bac7117cb0826215fcfda', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'df3c5e4b0ca4830cec0e0ace48520847688f79bc', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '9cc334f9c6d565a5ad325c9218c6a2e24a04444b', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '3d24e72417e5f1d4b744a37e9847f7e0dd5e387e', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '3d28cc9d073f283b5f58524a9cb274b61808aaeb', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'a153bedd03fe832c4dbfc1911c3469872ef45425', name: "button-left" }), h("input", Object.assign({ key: '6ef60b5b5ec7b53ec70114bf9cd75c354fe81c36', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -550,16 +550,17 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: 'd7ea6c3427b3322bca19315c2e53cccfc7c18720', class: "duet-input-icon" }, h("duet-icon", { key: '61c4fd1949006b451107d30ae3fd28d64cb190e6', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'def3271d3fdac203a5207bae75ddd98e2b5e9468', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '2febfb7a160144de44956c244f4a9b68bd8019c5', class: "duet-input-icon" }, h("duet-icon", { key: 'bfec761a97f3aaa0a686027b295f1004635db337', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '0f04d8c0153cd96923d3ec222eefe5ee936900dd', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
-            } }, h("button", { key: '17de740b399371c65036dca103bfc4c886308390', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '2655b6148930c0af787b741eb20a44b8b34759a2', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '269f9dbfab80af2cdb9bdf0d64244da2020c9fa2', class: "duet-input-icon" }, h("duet-icon", { key: '1ad17408d82b564de7a5645e75419a93757200e3', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '70516ac151effecf5b422a4a3de2d1dcd19023da', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '7853ad3332cbfdc7c24e84c434e6bf5a0a82f39c', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+                [`input-padding-${this.inputPadding}`]: true,
+            } }, h("button", { key: '3dc787b6e8470795c202b2b9e027c9193e731b9e', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f29c35083e8541aeabbf3130b73dcbbe35ed20a9', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '59e4fe1f64ca4f11d2cf39d7b33f086a838e2e60', class: "duet-input-icon" }, h("duet-icon", { key: 'e304b595a8594e38c63662e7bd47e7fdf9f06fc3', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '660d57f251986c4e712299152cd0fa1afa8a67c7', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '4b8d5a513f6513246217b18ea75bf0b44df3bbe9', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'b7be6ea65925eab1669e05244a2429ccf34aaada' }, h("span", { key: 'cd0074837e59dc04d600b7feae1d4169d7ee29ae', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'c16a59469b63b6d623cb0119dbcf49bed4269d37' }, h("span", { key: '60d86ffe14dc83c8f27a364c691014084a612d90', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'a22cf48a6d4f750ed4746a5b7d9e3079398e7231' })), h("span", { key: 'aafc2df53796f2c27847eca31e88de3e35e5adca', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '13e297b0f5d148ae9b92b177db23c0ca3728c7ac', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '700c7f3d746185f743b90f8c14e7cdbfe290d9b8' })), h("span", { key: 'b2ed0a75c22c458ab4008c83f1ad03e63cf143ac', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'aa9820e4fe4939f57bf2b50670693fc82ef925ce', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,4 +87,8 @@ label span {
 :host(.duet-theme-turva) label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2.duet-theme-turva) label {
+  color: #172a3b;
 }

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

@@ -66,24 +66,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c039d55e4dc7a84e97ea192f0c4688e027113735', class: {
+        return (h(Host, { key: '53712da1e22dc258d30906570bf1271624379ed8', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: 'e326f1c742928c4d6bd5cfb4253bb7aea68000eb', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '6962ea52e7f3f4fb88d3c01d045bc443855a2a85', class: {
+            } }, h("div", { key: '80dc2f3b86a02c22c7aebd8802bd332154c4a273', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '9f3f4c713d5b921ad78480072e3dcea4d4867d04', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '0a290a62602c61876e07a2c51631b60cde5c6732', class: "duet-layout-top-wrapper" }, h("slot", { key: '9e0e0f7a71f96956c6bab87289472b221cc6fb82', name: "top" })))), h("div", { key: '27243ae09de6542e2e71fc1d9df39d2af3c554e2', class: {
+            } }, h("div", { key: '7cd44f76b96b5e2bd6033cc044f08e75a10760ed', class: "duet-layout-top-wrapper" }, h("slot", { key: '7743f1fe659f31925b27a85a970e934506b935e7', name: "top" })))), h("div", { key: '637a68f8376e073f146c63f2c866b6f52722577e', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'ed6b4fa855141ee48f2cddec01fff1e8d6432fe9', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '7f88c6e8b5f8b8a3e66567d7da01ef3f07aaaaf6', name: "page-heading" }), h("slot", { key: '9d4c9f990275b90dac6877f5cb933cbb66eac05c', name: "main" })), this.hasSidebar && (h("aside", { key: '0f858e4431d899f53b021f0ebffc8c5ac3798570', class: "duet-sidebar" }, h("div", { key: '972538dd68d2fc1c181ea318d790b914b7595f4c', class: {
+            } }, h("main", { key: 'f6b2682dfb675be08976b23a485cf1a7ad76de0c', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '9ec618959d54d768b880f95e05df0e5aaf76de75', name: "page-heading" }), h("slot", { key: 'b3c960b48d55fb863854fc34e126b1a143b3d194', name: "main" })), this.hasSidebar && (h("aside", { key: '68671aab139ba365d60284909e489a78bd7438d3', class: "duet-sidebar" }, h("div", { key: '60a53e1fa61ccec8fa2b85f20b475c52e016b963', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '02a409b43bc86078406f80ee2b2f03159115b41a', name: "sidebar" }))))))));
+            } }, h("slot", { key: 'a6131a1af98bb5cf2c6c808b15cea9e6996143f3', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }