@duetds/components 9.17.0 → 9.19.0

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

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

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: inline-block;
   margin: 0 auto;
 }
@@ -79,5 +79,5 @@
 }
 
 :host(.duet-theme-turva2.duet-theme-turva) .duet-pagination-total-pages {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -342,32 +342,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c9fe96fc3da1353342e9b864e7ad2fcf711dc17c', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'ef4ca286ceae883a08fde9768c168d54d9e3b251', 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: 'af038eda29336dcdc68a74b852dc74cdd59a94a5', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'c3ae9d1579a649410f69c67e7611327a4c5477ff', 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: 'f8786d74f5cfc028016b66efc34c6a248b0b3795', "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: '79781be8b7faa9eb353efcf74864c83602de956b', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '8ddba22cf4f5ecd14ee57316062fdccb9fc92096', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '8db1a4b8626628c12b28be06480ffa38956a573d', "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: 'd2c3831b4e1c9bc464b046164f2123649c39bc54', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '3d83be2bdf8e48b4b942ccbdea92dd083bf9d71e', 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: '9ed42f129f8f0c87da06196b110c8d556aeb279a', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '4ae9c4d863f47173a26acaac2b427baf68490e45', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '00d898898b26870fb0aa71e5003cee8e322d6e53', 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: 'fea77adade297e5dd4421b10c951ae0a9c008d9b', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'b362823d28d9f1b06fbf6962754d71273c2a5cf8', 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: '2c02910d78403d4529f630dd51e449145bfe048e', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8f433ca73a21d2593b5993c33a9921f1773eec76', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '9a2a092c0c60212ccacab3da408c58e2adc0f281', 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: '189f029ec26aec1ef07fbcb690c58bce6189188c' }, h("li", { key: '32959efe57c7ff493a1d3fb1f75c7c6f2826eb10', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ec984a6771777da0459f194833dd6bd50ca94d7d', 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: '2962bb3d7451604a3baa097b6f3ffe624a28b25c', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'ac310350a88731d6f20e86177f80c23e4ec132c1', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '06a7f463a2fb478763233c6a30c57a5f52186b82', 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: '05ae094e5f561fbc52a573bc98166902fca7a8a8', 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: 'cf4913427876f3f02fb1dd5a52e64cad8c826725' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '5261de2729dd37d92bb70e67ab076640f6d59b84', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '7013a952e25adacaad0c563e842e08c63029007f', 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: 'f85a76e62df9db2edea74f9b4ff399b534b98b24', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'c6f67eb82e7d7d0d293a855ab9f78db120c8db28', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '39e8d8a0ed0c6ba16e690671d8d614a5b5bd7586', 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: 'f4f7d5ac7ce75c6ebbff06efe1695f10fb236891' }, h("li", { key: '3552fe56d501c9b4b3967fe083cc66c096235f76', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '3a023eb7c1ea03bb47aea35d20eabb1b417d6467', 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: '2f66035fe1ee4a6546edf0aa3bb6250d1f3c561e', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '00aa006863cfd37c64ee8613de98046bff8d311b', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '5d16c811fab573aed0b88d4021790d75146435f7', 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: '6c1241a5e9cba1367c2195808295b58cf7f197d6', 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: 'fe20764e7bdb381f3bd84295625aac7116e1debf' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '40cd85c84088219ec5debbaf816cba6408aac764', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '3d6fac55460757cda88c3396eac74d6005b15e7c', 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: '5b6e9f5aef2df6218006b13120cf6f9cadbf3e03', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'dd18dd41e5e90639f44ccbfc9640aa88b1ad0c84', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ebc4e60fe510528a11b9db54a025dccb1e7c1a3f', 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: 'e506d8d9edd2a2c3405724feec0f171e0acacac2', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'd62d774a158f0bda48c574a9717e7a42f357bab2', class: {
+                : undefined }, h("div", { key: '29e70bbaaa1b5124d7c2e40a63e3223add9fe2dd', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '4a16b37cb12d13acb5d3ff59a3e84b07bcdfe592', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e90288259fd328203b00c05f92682d44d5842e82', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '49fad8750044ae65eba432e720a9c996201257dd', 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: 'b47b3e1145ab9acec968a959eb2dede859183893', 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: 'b544bfa7ab5c73f436a842a2ea8b6886759c369c', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'f216759c8c8a85ddfd5b503ade45223c157baef8', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'a2e0494af4a8ae5dfb712121aaeb4ce17446555f', 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

@@ -1,13 +1,12 @@
-/* stylelint-disable scss/at-rule-no-unknown */
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   display: block;
   width: 100%;
@@ -84,16 +83,16 @@
 }
 
 :host(.duet-theme-turva2) .duet-panel.duet-theme-turva {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-panel.duet-theme-turva.secondary {
-  background-color: #f5f6f7;
+  background-color: rgb(245, 246, 247);
 }
 :host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent {
-  background-color: #fdf7f2;
-  border-color: #f1cab2;
+  background-color: rgb(253, 247, 242);
+  border-color: rgb(241, 202, 178);
 }
 :host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent.secondary {
-  background-color: #fbe1d1;
+  background-color: rgb(251, 225, 209);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   display: block;
   width: 100%;
@@ -34,10 +34,10 @@
   font-style: normal;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.5;
   color: rgb(8, 42, 77);
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
 .duet-paragraph.duet-p-0 {
   padding: 0 !important;
@@ -109,11 +109,11 @@
 }
 
 :host(.duet-theme-turva2) .duet-paragraph.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) ::slotted(a).duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) ::slotted(a:hover).duet-theme-turva {
-  color: #8c001e;
+  color: rgb(140, 0, 30);
 }

package/lib/collection/components/duet-phone-input/duet-phone-input.css

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 span.flag-container {
@@ -23,23 +23,26 @@ span.flag-container {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
   width: 100%;
   min-width: calc(33.333% - 8px);
   max-width: 100%;
-  text-align: left;
   vertical-align: bottom;
+  text-align: left;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-popup-menu-list {
@@ -27,20 +27,20 @@
   top: 0;
   left: 0;
   z-index: 950;
+  visibility: hidden !important;
   width: max-content;
   min-width: 175px;
   padding: 8px;
   margin: 0;
   color: rgb(8, 42, 77);
   list-style: none;
-  visibility: hidden !important;
   background: rgb(255, 255, 255);
   border-radius: 8px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   opacity: 0;
-  transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
   transform: scaleY(0);
   transform-origin: top center;
+  transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
 }
 .duet-popup-menu-list.open {
   visibility: visible !important;
@@ -68,5 +68,5 @@ slot {
 }
 
 :host(.duet-theme-turva2) .duet-popup-menu-list.duet-theme-turva {
-  color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: flex;
   flex-direction: row;
   gap: 8px;
@@ -28,6 +28,8 @@
 }
 
 .duet-popup-menu-item {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-grow: 1;
   gap: 12px;
@@ -42,19 +44,24 @@
   text-align: left;
   text-decoration: none;
   cursor: pointer;
+  border-radius: 4px;
 }
 .duet-popup-menu-item:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-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 {
+  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, 28, 58);
 }
 .duet-popup-menu-item.active {
+  z-index: 0;
   background: rgb(240, 247, 250);
 }
 .duet-popup-menu-item.active.duet-theme-turva {
@@ -74,19 +81,20 @@
 }
 
 .active-descendant {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva, .duet-theme-turva2 .active-descendant, .active-descendant.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 :host(.duet-theme-turva2) .duet-popup-menu-item.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-popup-menu-item.active.duet-theme-turva {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-popup-menu-item:hover.duet-theme-turva {
-  background: #fbebe1;
+  background: rgb(251, 235, 225);
 }

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

@@ -69,11 +69,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: 'd62c7b684bbf98e2ff38ae6303e7aaad03942ff9', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '171d91b4a5f612c2b60a7c908ca0da3a0824e2fd', 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: '37db0ce85c42bb23dd33c522a5ebcaa174df58fa', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '8af23f7a78dc25f8d1d05adfdd8dc3bd1d489af8', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ef86e949a4bacdc7755e6e49f5814d554584a9be' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'e20daf8a4e639ab2369cc9b8f5a1c725480f60ad', name: this.url && this.external
+        return (h(Host, { key: 'd62c7b684bbf98e2ff38ae6303e7aaad03942ff9', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '171d91b4a5f612c2b60a7c908ca0da3a0824e2fd', 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: '37db0ce85c42bb23dd33c522a5ebcaa174df58fa', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '8af23f7a78dc25f8d1d05adfdd8dc3bd1d489af8', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ef86e949a4bacdc7755e6e49f5814d554584a9be' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '579369a5f1da1a7275dd309e163d1d5d3b847db2', 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: 'e2dd555bf026bf0197428aec002bb0d49f532bb5', 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: 'b9892d68a4a7d31a41d3fe3fbeac15cea7045895', 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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: inherit;
 }
@@ -28,11 +28,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
   min-height: 1px;
@@ -68,12 +68,12 @@
   min-height: 1px;
   /* For IE10 */
   color: rgb(0, 119, 179);
-  /* Get rid of default border in Firefox. */
-  border: 0 none;
   /* Reset the default appearance */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  /* Get rid of default border in Firefox. */
+  border: 0 none;
 }
 .duet-progress progress[value]::-webkit-progress-bar {
   background-color: rgb(240, 247, 250);
@@ -103,20 +103,20 @@
 }
 
 .duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar {
-  background-color: #fdf7f2;
+  background-color: rgb(253, 247, 242);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar > span {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value] {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
-  background-color: #fdf7f2;
+  background-color: rgb(253, 247, 242);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
-  background-color: #fdf7f2;
+  background-color: rgb(253, 247, 242);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 4px !important;
   margin-bottom: 2px !important;
   display: block;
@@ -28,6 +28,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 4px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -56,24 +59,30 @@
   height: 100%;
   color: inherit;
   text-decoration: none;
+  border-radius: 20px;
 }
 .duet-promo-card .content-wrapper:focus {
-  border-radius: 20px;
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-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 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-promo-card .image {
   position: relative;
   width: 100%;
   overflow: hidden;
+  object-fit: cover;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
-  object-fit: cover;
 }
 .duet-promo-card .content {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   gap: 8px;
   padding: 20px;
 }
@@ -97,9 +106,6 @@
 .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.duet-theme-turva .content-wrapper:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 
 .duet-promo-card-link {
   transition: box-shadow 300ms ease;