@duetds/components 10.2.4 → 10.3.1

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

@@ -209,45 +209,28 @@
 .duet-page-heading .progress-step.active {
   background-color: rgb(0, 119, 179);
 }
+
 .duet-page-heading.duet-theme-turva {
   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(8, 42, 77);
 }
-.duet-page-heading.duet-theme-turva .brand-shaped-icon {
-  background: rgba(230, 23, 64, 0.9);
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-.duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon {
-  position: relative;
-  top: -3px;
-}
-.duet-page-heading.duet-theme-turva .progress-step {
-  background-color: rgb(178, 194, 205);
-}
-.duet-page-heading.duet-theme-turva .progress-step.active {
-  background-color: rgb(230, 23, 64);
-}
-
-:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .background .background-mask {
+.duet-page-heading.duet-theme-turva .background .background-mask {
   background-image: none;
 }
-:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon {
+.duet-page-heading.duet-theme-turva .brand-shaped-icon {
   background: rgb(23, 42, 59);
   border-radius: 16%;
   -webkit-mask-image: none;
   mask-image: none;
   transform: rotate(0);
 }
-:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon {
+.duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon {
   top: 0;
   transform: rotate(0);
 }
-:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step {
+.duet-page-heading.duet-theme-turva .progress-step {
   background-color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step.active {
+.duet-page-heading.duet-theme-turva .progress-step.active {
   background-color: rgb(230, 23, 64);
 }

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

@@ -43,12 +43,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: 'a359f4cb235a3897640cdffbd39139e189d3b5fa', class: {
+        return (h("div", { key: '5cf22cfc2c34017d8c7467fe36becf60ba78bc75', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '22d49c2080af3bd20cd103be9e03d1493be49e12', class: "background" }, this.theme === "turva" && h("div", { key: '836160c0757b45f0fd56a737c5477e7f991647c9', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '11114653280d8354c0837c7b696afa7420ce317a', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'e73ed36215b6b4670f475177bd15671c70780c0b', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'ca24de4ed573cccf325e04b63789ea5361cf2d5a', class: "brand-shaped-icon" }, h("duet-icon", { key: '78fffdbc09d6489a817b17ac8fe360a969278292', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '132aa722e9021f4fe671f36eeada043c752627ed', class: "heading" }, h("slot", { key: 'a0545b6a759f1f3fcb73d3a63f32e9f070975835', name: "heading" }), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'de89e016dba311fccd701f213fb9c497a5b103ea' }, h("duet-spacer", { key: '28ad3743d3ea8ac559fddc00915b063b30d13e39', size: "large" }), h("div", { key: 'bc13cc4c86fe3f765ccb5aaa51e8cb4871f55d1f', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: 'e9ccfced6335c96af6d7baa92a53db59d45b8b30', class: "background" }, this.theme === "turva" && h("div", { key: '830e60d9e2fdf9918b743766ae94353be9e85993', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'ea055759c169167bec0e0096e3c5ba6c7233b756', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '62ee3252ea809756e6a7de1f18017dc62b14d3ba', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '29ec53ff4adad92e0f2dd7d93c7046dfbb2d6c7b', class: "brand-shaped-icon" }, h("duet-icon", { key: 'a09e043d17d4f9c4c3ab8aaa7aaae33126df0d77', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '913c970c7ae47d0a56416b0102dd4a65648b0bbe', class: "heading" }, h("slot", { key: 'f573503b294909f8119d8d3f66d265c737570cd8', name: "heading" }), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'f2b0ab3aad8acc8071ace37653fbfb8243681056' }, h("duet-spacer", { key: 'ffca4d17364920c928844b6872d399ac2cd29303', size: "large" }), h("div", { key: '7a2c5f9eddb7eb0acc1187303e67dae2f5683e23', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,8 +76,4 @@
 :host(.duet-theme-turva) .duet-pagination-total-pages {
   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, 42, 59);
-}
-
-:host(.duet-theme-turva2.duet-theme-turva) .duet-pagination-total-pages {
-  color: rgb(23, 42, 59);
 }

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

@@ -394,32 +394,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '62c4d84c58a0267e958230835282746f490f5b93', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'e308cbce7bfe457df21ca5d1a9b011ad306d8090', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        return (h(Host, { key: '593c48b276e6b36bff6f78dc731f956c3aaedb82', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '446532b79dd77af3e71a152ae7dc208d45cc6ec5', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
                 "duet-pagination-nav": true,
                 [`duet-pagination-variation-${this.variation}`]: true,
-            } }, this.numbersStore !== "" && (h("div", { key: '63cba2aeb5b53aceba412cd3ef544fad0b83f7e7', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '2c8d10cd7d2f4087336f5bd28905809fdf6852de', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'ff23766c13debac377872850c408980460700cd3', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: 'ca5700930cd45ccf48ac1d55603266219183b028', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '53c449d054bee784544f24ab8afb6273ac5cb870', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '986f34a0664b6dc0517824b88f996342d9f7116b', id: this.listId, class: {
                 "duet-pagination": true,
                 "duet-pagination-is-dimmed": this.numbersStore !== "",
-            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'af629fdaaaaceda9b49f04abb0adc8a4d111af69', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '1ccc38d06b7a79f9de8ee762a9b9ab959010a436', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '5b3580de4b5aa7cae5aac470c451276cb2915bb7', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: 'b763efe60e95ce22c9a10a16f771306bc41c94e8', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8a0f11e5cd9f5de4a967cc56b0c1816a4de15229', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '830cc19f3a5580f96cef9cc9650221d19fc5ed95', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '4614a19eee937ec82b1d7f53774536bc3dc53efe', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'bd02a81bf5945b1ebfb5eacf1a29f85f859e297e', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
                 (this.current <= 1 && this.processedPageLinks) ||
-                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '6a58f0e2274e19bc36ed5724f8272b7d52aafbff' }, h("li", { key: '3c9463d76188a6c709a339bc6aeb742230649517', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'faa2bb79c16612bf21b3c894bd044524094000b5', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '1d57199a2de289499f857d60e85abc5b03347701', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '165edfb178a9a37a62729c254ef59a759cf3234e', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '2f86dc307015ec5c4f0c8ed8485eb539419b100f', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: 'b72d8f2a8d07e8c81b9d3a1eff872b387982f531', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
-            this.shouldDisplayNavigation() && (h(Fragment, { key: 'd92b8e89d424fa566d435985832c1a47ff6f00e0' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '02c6801c1212cdbd836d3206e0c3c57e0009c360', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '3668dc509fbdb6567da22e8fbde178cba0a2c371', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: 'e41f0ff84f1f30725a8c10788cbc790b5548f3e2', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '3c8b3b2d1ae67bd70464a4463fce1abeac270a17', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'd29669bc78a9d8b299a674fbb0c862a35f2de7cd', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
+                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '9d0fa1e1e3567d5ba912861620b0d05f17a592fd' }, h("li", { key: 'e8789887f488d6445e3d2653abcf5564eab8afc2', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'd7e98b1d702e30e935d3dd1c52ad8c4bb187b0fa', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '997822a5c36dbe6c2ded94fbee6728bfa0d64f03', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '91d5668412f906d7c35702b7c2c28473d2928768', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '3a2113ad718394fa6365a41aaeea306b91f1431e', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: '3fbc0fc4b9fa8b0c4595991f39e6266efd7e3481', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+            this.shouldDisplayNavigation() && (h(Fragment, { key: '1f324dd16a9b57aefbe62e60e56e5fe3d5af72ce' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'd8c3b8f2db2a2c642a63cc8781f56480d2c0d409', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '9117fbb075c437646e64eceb0316ad702c5fe8b2', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: 'b80ed14f62fee001b600d720a7719174da3d0958', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '8059714abaf60464fda99e46b5f364e94ce75385', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'f9f4f6868664e410d8e0177afaf816328bce46a7', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
                 ? this.processedPageLinks[this.processedPageLinks.length - 1]
-                : undefined }, h("div", { key: '2c159077e6b2c5c72d820fa113be972db3c1a36a', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '17f8cb237ba3352dab6a6f9190a82995c6af50db', class: {
+                : undefined }, h("div", { key: '5bb0466c1c108b1dedf6a0e2d5d67f0408037c85', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '4c8e76afbdf203f29a8a4096bf4870b15bd9f930', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '2ed254adb9ac8a59160dda2da09dc9b4c451cfd7', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '1f3f2dc875d130ddd2e01643fe0b69a6c32325c6', disabled: !!((this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'be6cef233eeac10ca4964c07a8875832e5e8c5dd', class: {
+                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'a5c496cb09c9be08249bee069439a3395e7897ad', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '10c56fa0387027938a2778de48741e89c7186bd8', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '2e6eb9240c1d90bef1028d0b6eabf8d74a178b17', disabled: (this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
                 this.disabled, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }

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

@@ -29,11 +29,6 @@
   border: 0 solid rgb(212, 223, 229);
   border-radius: 16px;
 }
-.duet-panel.duet-theme-turva {
-  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, 42, 59);
-  border-color: rgb(212, 221, 226);
-}
 .duet-panel.padding-small {
   padding: 16px;
   border-radius: 12px;
@@ -65,35 +60,26 @@
 .duet-panel.secondary {
   background-color: rgb(245, 248, 250);
 }
-.duet-panel.secondary.duet-theme-turva {
-  background-color: rgb(245, 246, 247);
-}
 .duet-panel.accent {
   background-color: rgb(240, 247, 250);
   border-color: rgb(198, 225, 238);
 }
-.duet-panel.accent.duet-theme-turva {
-  background-color: rgb(245, 246, 247);
-  border-color: rgb(178, 194, 205);
-}
 .duet-panel.accent.secondary {
   background-color: rgb(217, 236, 245);
 }
-.duet-panel.accent.secondary.duet-theme-turva {
-  background-color: rgb(212, 221, 226);
-}
 
-:host(.duet-theme-turva2) .duet-panel.duet-theme-turva {
+.duet-panel.duet-theme-turva {
+  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, 42, 59);
   border-color: rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.secondary {
+.duet-panel.duet-theme-turva.secondary {
   background-color: rgb(245, 246, 247);
 }
-:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent {
+.duet-panel.duet-theme-turva.accent {
   background-color: rgb(253, 247, 242);
   border-color: rgb(241, 202, 178);
 }
-:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent.secondary {
+.duet-panel.duet-theme-turva.accent.secondary {
   background-color: rgb(251, 225, 209);
 }

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

@@ -30,14 +30,14 @@ export class DuetPanel {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: 'f0f19f168e9dc722234dfe71c45e696a0d6cf917', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: '2701d432c58239047f7564d14da3ea552313299f', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+        return (h(Host, { key: 'b3dc7fe74cdf89d0b2216283a5250b81bc7dac7c', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: 'c49f7aecda72185d245ae77bd177fe3abb999023', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
                 "duet-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation.split("-")[0]]: true,
                 [this.variation.split("-")[1]]: true,
                 [`padding-${this.padding}`]: true,
                 border: this.border,
-            } }, h("slot", { key: '4a02d9373b2c07f0d9f8e6a08e41c0ec5a7894f7' }))));
+            } }, h("slot", { key: '846efa69e68b7e7f672d4441877af8c72221e713' }))));
     }
     static get is() { return "duet-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,10 +45,6 @@
 .duet-paragraph.duet-m-0 {
   margin: 0 !important;
 }
-.duet-paragraph.duet-theme-turva {
-  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, 42, 59);
-}
 .duet-paragraph.duet-inherit-color {
   color: inherit !important;
 }
@@ -92,28 +88,25 @@
   text-decoration: underline;
   transition: 300ms ease;
 }
-::slotted(a).duet-theme-turva {
-  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(230, 23, 64);
-}
 ::slotted(a):hover {
   color: rgb(0, 75, 129);
   text-decoration: none;
 }
-::slotted(a):hover.duet-theme-turva {
-  color: rgb(140, 0, 30);
-}
 ::slotted(a):active {
   opacity: 0.75;
   transition: none;
 }
 
-:host(.duet-theme-turva2) .duet-paragraph.duet-theme-turva {
+.duet-paragraph.duet-theme-turva {
+  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, 42, 59);
 }
-:host(.duet-theme-turva2) ::slotted(a).duet-theme-turva {
+
+::slotted(a).duet-theme-turva {
+  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(230, 23, 64);
 }
-:host(.duet-theme-turva2) ::slotted(a:hover).duet-theme-turva {
+
+::slotted(a:hover).duet-theme-turva {
   color: rgb(140, 0, 30);
 }

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

@@ -52,7 +52,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: 'b685bc9743cf7835c8b3c42219d01776f68b36d8', "aria-describedby": this.id }, h("p", { key: 'fab064d13421d92311b516ce3658c09f82a8e6a8', id: this.id, class: {
+        return (h(Host, { key: 'b0db3004861f5dfe17d4927087ba6301bc607f5d', "aria-describedby": this.id }, h("p", { key: 'f74e4f0206012d316417ea743d72cc0b76b92ee5', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -61,7 +61,7 @@ export class DuetParagraph {
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-inherit-color": !this.color && this.inheritingParents.some(p => this.element.closest(p)),
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '32a2fb093a12ade4b27b94047a87614645f2a128' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '86d18dc5cd6ed9610a477fa09b2776d4f2037346' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.css

@@ -54,10 +54,6 @@
   overflow-y: scroll;
   scroll-margin: 20px;
 }
-.duet-popup-menu-list.duet-theme-turva {
-  color: rgb(23, 42, 59) !important;
-  background: rgb(255, 255, 255);
-}
 
 ::slotted(duet-notification) {
   max-width: 360px;
@@ -67,6 +63,7 @@ slot {
   --divider-margin: var(--space-x-small, 8px);
 }
 
-:host(.duet-theme-turva2) .duet-popup-menu-list.duet-theme-turva {
+.duet-popup-menu-list.duet-theme-turva {
   color: rgb(23, 42, 59) !important;
+  background: rgb(255, 255, 255);
 }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -190,12 +190,14 @@ export class DuetPopupMenu {
             return;
         }
         this.teleport.observeDeletion();
-        if (this.controller && typeof this.controller !== "string") {
-            this.setOpenButton(this.controller);
-        }
-        else {
-            this.setOpenButton();
-        }
+        requestAnimationFrame(() => {
+            if (this.controller && typeof this.controller !== "string") {
+                this.setOpenButton(this.controller);
+            }
+            else {
+                this.setOpenButton();
+            }
+        });
     }
     disconnectedCallback() {
         if (this.autoUpdateCleanup) {
@@ -406,17 +408,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '3534adf5c6abb308f55859ca8825f540149c4365', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '8df3cd5cf367bc4bc8fe2414450f2b609ebc8d8b', ref: element => {
+        return (h(Host, { key: '4ba8c544fd10ae2157f9f57f4ea668fba9982b39', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '8167c05e3cbcc2240210eda963d1d0eeece5b15e', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '1f455934a4ccc2124488b60ff8f04d82b3200cec' }, h("duet-input", { key: 'b763609a5d22ff87ad82cc7874bda7adf64956ec', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '91e60fbfc9d747551489af0cc9c5ebdd13d4eba9' }, h("span", { key: '605812e1cb2866eb2c71804a089ad6df771d57d1', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'bdfb595523f97e6ba3157f6b74ce07ade4b1fc83' }, h("duet-input", { key: '85251d071a3bf62fc5fcd986196b0a904280b889', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '410bd62c0d3621d294b3deb724803a104e46b85e' }, h("span", { key: 'a2036427c7785993ae0d632887855779e1437ce1', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: '50d88c6e45d84d5ca864155420c736df12d5f188', size: "xx-small" }))), h("slot", { key: 'b25f422c968d1b9179a547cc7b022f77d0db0ce3' }))));
+                `)), h("duet-spacer", { key: '289e215aaa765f00794710b8f309a3cd6d082468', size: "xx-small" }))), h("slot", { key: '6d149b93858d2437e7eb684c33e4ed55af7659a3' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.css

@@ -51,28 +51,18 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
 }
-.duet-popup-menu-item.duet-theme-turva {
-  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, 42, 59);
-}
 .duet-popup-menu-item.active {
   z-index: 0;
   background: rgb(240, 247, 250);
 }
-.duet-popup-menu-item.active.duet-theme-turva {
-  background: rgb(245, 246, 247);
-}
 .duet-popup-menu-item:hover {
   background: rgb(228, 241, 247);
 }
-.duet-popup-menu-item:hover.duet-theme-turva {
-  background: rgb(212, 221, 226);
-}
 .duet-popup-menu-item .duet-popup-menu-item-label {
   flex-grow: 1;
 }
@@ -85,16 +75,19 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva, .duet-theme-turva2 .active-descendant, .active-descendant.duet-theme-turva2 {
+.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
-:host(.duet-theme-turva2) .duet-popup-menu-item.duet-theme-turva {
+.duet-popup-menu-item.duet-theme-turva {
+  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, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-popup-menu-item.active.duet-theme-turva {
+
+.duet-popup-menu-item.active.duet-theme-turva {
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-popup-menu-item:hover.duet-theme-turva {
+
+.duet-popup-menu-item:hover.duet-theme-turva {
   background: rgb(251, 235, 225);
 }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -101,11 +101,11 @@ export class DuetPopupMenuItem {
         };
         // Without the role ternary Safari/iPhone wouldn't announce the label for role menuitem.
         // This is a tradeoff and now Safari announces these items as buttons and links with the label.
-        return (h(Host, { key: 'db95c4e9fb0aa71e489935fd47c3f7ac2ff56a19', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '7a082c08242605aa154211c91f25932d33478543', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'b3a98a07f252dfe67ce170caebca0f42ab683571', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'bda00beb4a4dc78a60830870a639a01dc99fcf5f', class: "duet-popup-menu-item-label" }, h("slot", { key: '7c23f4c1c0b3ef2ff6d3cc555a0dedbbd8ffcfad' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'dca34adebe0f4c93d78b00fa32796a139a3a86b7', name: this.url && this.external
+        return (h(Host, { key: 'eb6acbbfccced4c0c5bdc00642932696d4664dfd', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'e94bf11c073da949474e06d550e077df94bd8bb1', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage, "aria-current": this.active ? "true" : undefined }, this.leadingIcon && (h("duet-icon", { key: '4083d9ff9034800978d924bc764ab10f3064ed26', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'dbfcd31c2fff06c014e86f4df2c832e9e424599f', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ad0150c3fc13b2a43afaaecc3f75b99b7a2041db' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'f4a9ee09f5c6ac0d7c7a4f79dfe8eeef13f2cf26', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'c6fc39d5f1aacf715990e749d2f559761d51344f', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '89bfa872c8e0a00165bf1d591c29c0ed41b7e2a0', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,9 +48,6 @@
   border-radius: 0;
   box-shadow: none;
 }
-.duet-theme-turva .duet-progress .progress-bar {
-  background-color: rgb(255, 242, 242);
-}
 .duet-progress .progress-bar > span {
   display: block;
   height: inherit;
@@ -58,9 +55,6 @@
   background-color: rgb(0, 119, 179);
   border-radius: 0;
 }
-.duet-theme-turva .duet-progress .progress-bar > span {
-  background-color: rgb(230, 23, 64);
-}
 .duet-progress progress[value] {
   display: flex;
   width: 100%;
@@ -89,34 +83,27 @@
 .duet-progress progress[value] ::-moz-progress-bar {
   background-color: rgb(240, 247, 250);
 }
-.duet-progress.duet-theme-turva progress[value] {
-  color: rgb(230, 23, 64);
-}
-.duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
-  background-color: rgb(255, 242, 242);
-}
-.duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
-  background-color: rgb(230, 23, 64);
-}
-.duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar {
-  background-color: rgb(255, 242, 242);
-}
 
-.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar {
+.duet-progress.duet-theme-turva .progress-bar {
   background-color: rgb(253, 247, 242);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar > span {
+
+.duet-progress.duet-theme-turva .progress-bar > span {
   background-color: rgb(230, 23, 64);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value] {
+
+.duet-progress.duet-theme-turva progress[value] {
   color: rgb(230, 23, 64);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
+
+.duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
   background-color: rgb(253, 247, 242);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
+
+.duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
   background-color: rgb(230, 23, 64);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
+
+.duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
   background-color: rgb(253, 247, 242);
 }

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

@@ -66,7 +66,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-promo-card .content-wrapper:focus, .duet-promo-card .content-wrapper:focus.duet-theme-turva, .duet-theme-turva2 .duet-promo-card .content-wrapper:focus, .duet-promo-card .content-wrapper:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-promo-card .content-wrapper:focus, .duet-promo-card .content-wrapper:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -103,9 +103,6 @@
 .duet-promo-card.no-bg-color .image {
   border-radius: 16px;
 }
-.duet-promo-card.duet-theme-turva {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
 
 .duet-promo-card-link {
   transition: box-shadow 300ms ease;
@@ -113,6 +110,17 @@
 .duet-promo-card-link:hover {
   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), 0 2px 10px 0 rgba(0, 41, 77, 0.1);
 }
-.duet-promo-card-link:hover.duet-theme-turva {
+
+::slotted(.duet-heading) {
+  margin: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  color: inherit !important;
+}
+
+.duet-theme-turva.duet-promo-card {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-theme-turva.duet-promo-card-link:hover {
   box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 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), 0 2px 10px 0 rgba(117, 117, 117, 0.15);
 }

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

@@ -3,7 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
+import { checkNamedSlotElement, getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
 import { getColorByName, postfixTheme } from "../../utils/token-utils";
 /**
  * @slot pre-heading - Slot for pre-heading content.
@@ -42,12 +42,16 @@ export class DuetPromoCard {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        const headings = ["h1", "h2", "h3", "h4", "h5", "h6"];
         inheritGlobalTheme(this);
         this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
         this.hasHeadingSlot = hasSlot(this.element, "heading");
         this.hasDescriptionSlot = hasSlot(this.element, "description");
         this.hasActionSlot = hasSlot(this.element, "action");
-        checkNamedSlotElement(this.element, "heading", "span");
+        checkNamedSlotElement(this.element, "heading", `span,${headings.join(",")}`);
+        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings.join(","))) {
+            this.hasHeadingSlotNative = true;
+        }
         checkNamedSlotElement(this.element, "description", "span");
     }
     /**
@@ -70,12 +74,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '56be16710912a7b098e4c1bd75ece4275deda02e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '8520123e09db6f31e9c0f5a5833318203a03f437', class: {
+        return (h(Host, { key: 'd36e73e86f96e7825e96c7730b330afa8a23c14e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '50c45ed20c3dd5c321f20cac8f98d2ec87848f18', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'ce219857ea16f66413f0ffe066a42e2f6c7de2b7', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: 'b8fd35ff9576c1c84b78a1c35fa26f0d8a7bdd83', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: 'e488f6860798e150634d0bd7355bfcfdd0639099', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '50defa4cebf48f12beb6a6e25bb3b058bd4ab108', class: "pre-heading" }, h("slot", { key: '3fe0e93d82863d84d9f95b09e301ba409d959def', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '4e7e6c68a1aca92f52e6e109216735f73d801174', class: "heading" }, h("duet-heading", { key: '2ac242af4113cff2e0aecdc7d08a5a5c576e0a83', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '9c9c3ea67f05664c74d029b1692fc861492ae803' }, h("slot", { key: '6e0d8069fdcd49bea6a9f090e195234de7ebb30f', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'ed90f9561b935ca29e72a2be7610815ddf7cb6f6', class: "description" }, h("duet-paragraph", { key: '50725ca77dd7bdfc626d0a04c9a312bbc26f7695', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'ab9901ea88b885a28027b12af72bf8080126407d' }, h("slot", { key: '0029e88a6d769cc0084b90c7be3035cda0a9a3b1', name: "description" }))))), this.hasActionSlot && (h("div", { key: '595080e76cbb790f9bf2cdbfcaaadd23966c596e', class: "action" }, h("slot", { key: '59d7aceeb4f3fe3e72a49a3e2bd405ab5dc043f8', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '3e564c0bcfda6680953b88b4c8d78462bf938046', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: 'd29c458cefa1d508258c17b8ceffeb7739519bf5', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: '994fb32775e2da22e3d3d28b0b7d95f115c083ec', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'cf3d737104fabdf6f04deef643fd06e0e0032db4', class: "pre-heading" }, h("slot", { key: 'd92602ce7cfc2b1f3c5779be9d6e735077a1deea', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'a23103a88fe437d4627a1f417e3bea353ad04851', class: "heading" }, h("duet-heading", { key: '762f79431019baecae385b2220c5dffecc326592', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '0233f85fb7b39558f901ebbdd2beda46f9679e7c' }, h("slot", { key: '57286a6f7d2527c6fa38fb8d5292b760d308ce44', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '70031569694cdefd28fb439fd790d067b56c3757', class: "description" }, h("duet-paragraph", { key: '5859eb0737fad1711d6013ce1350cb45831c3660', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'dd12525a9e8f185d607933fe4d58dd6ff2a71651' }, h("slot", { key: '0056201e47bede4761bea53b47fa621330d6fef7', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2299fa55f537af1056c84adccbe7b876d7252434', class: "action" }, h("slot", { key: '3744426783f605338d6da2911e3d4bb83e899151', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }