@duetds/components 9.16.1 → 9.18.0

package/lib/collection/components/duet-notification/duet-notification.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%;
 }
@@ -36,13 +36,13 @@
   cursor: pointer;
 }
 :host(:first-of-type) .duet-notification {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--notification-border-top-radius, 8px);
+  border-top-right-radius: var(--notification-border-top-radius, 8px);
 }
 :host(:last-of-type) .duet-notification {
   border-bottom: 0;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: var(--notification-border-bottom-radius, 8px);
+  border-bottom-left-radius: var(--notification-border-bottom-radius, 8px);
 }
 .duet-notification.duet-theme-turva {
   color: rgb(23, 28, 58);
@@ -69,11 +69,13 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-notification:focus-within {
+  outline: 2px solid;
+  outline-offset: -2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 1;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-notification-container {
@@ -146,17 +148,17 @@
 }
 
 :host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
-  color: #172a3b;
-  border-bottom-color: #fbe1d1;
+  color: rgb(23, 42, 59);
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
-    background: #fdf7f2;
+    background: rgb(253, 247, 242);
   }
 }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.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%;
 }
@@ -41,6 +41,7 @@
   height: 48px;
   padding: 0 20px;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 400;
@@ -48,15 +49,25 @@
   line-height: 48px;
   color: rgb(8, 42, 77);
   text-align: left;
-  text-decoration: none;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background-color: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(212, 223, 229);
   border-radius: 0;
-  -webkit-appearance: none;
-  appearance: none;
+}
+.duet-drawer-toggle:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-drawer-toggle:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
   .duet-drawer-toggle {
@@ -81,15 +92,6 @@
 .duet-drawer-toggle:active {
   opacity: 0.75;
 }
-.duet-drawer-toggle:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-drawer-toggle:hover {
   color: rgb(0, 75, 129);
 }
@@ -110,8 +112,8 @@
     height: 3px;
     content: "";
     background: rgb(0, 119, 179);
-    transition: 300ms ease;
     transform: translateY(3px);
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-toggle::after {
     background: rgb(198, 12, 48);
@@ -166,9 +168,9 @@
   margin-left: 8px;
   line-height: normal;
   pointer-events: none;
-  transition: 300ms ease;
   transform: translateY(-50%);
   transform-origin: 50% 50%;
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-drawer-caret {
@@ -198,15 +200,17 @@
 }
 @media (min-width: 62em) {
   .duet-drawer-content {
+    --notification-border-top-radius: 0;
+    --notification-border-bottom-radius: 4px;
     position: absolute;
     top: 100%;
     z-index: 600;
     display: block;
+    visibility: hidden;
     width: 450px;
     max-height: 420px;
     padding-left: 0;
     overflow-y: auto;
-    visibility: hidden;
     background-color: rgb(255, 255, 255);
     border: 1px solid rgb(212, 223, 229);
     border-radius: 4px;
@@ -214,9 +218,9 @@
     border-top-right-radius: 0;
     box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
     opacity: 0;
-    transition: 300ms ease;
     transform: scale(0.95) translateZ(0) translateY(-10px);
     transform-origin: 50% 0;
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-content {
     background-color: rgb(255, 255, 255);
@@ -240,14 +244,14 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true],
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
-  color: #8c001e;
-  border-color: #f5f6f7;
+  color: rgb(140, 0, 30);
+  border-color: rgb(245, 246, 247);
 }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -99,7 +99,10 @@ export class DuetNotificationDrawer {
         return (h("div", { key: '469b8f1022a88519a9f0aa400d56641c29e11b88', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '00b263a2e4980db5c31e03994c347871b024b588', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '2cde7596baa2aa3ab9465213d5e5b500c33310f3', class: "duet-drawer-icon" }, h("duet-icon", { key: '220c78141beee80d57077b270e8521b633128201', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '25ccfdf0643a4e7d41a36479cf43dc94db12df4f', variation: "change" }))), h("span", { key: '9b416e1ddcbc0acaab40f5c8bc6c5f9885037c8f', class: "duet-drawer-label" }, this.label), h("div", { key: '157c0eeaf53edadea7ee8f8c6f4a526d055960ac', class: "duet-drawer-caret" }, h("duet-icon", { key: '8f0e4deafa0f3550173266e0934dae7fb2dfcc99', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'e77866382b60d4c6bdf4d2526f9913a333e563b8', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '7eb53b799e595aef176ea46d17da5f57ab11b2a1', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+                "duet-drawer-toggle": true,
+                "duet-theme-turva": this.theme === "turva",
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '11d791ee5ede9eb8a17cff532fac041251ef71f3', class: "duet-drawer-icon" }, h("duet-icon", { key: '9a3d90082ade25df364bac86f434a3f71e80e5e8', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: 'da255d1b1ae3f08edcd078484a0645302ced9e9a', variation: "change" }))), h("span", { key: '4143c21837a70b682f2fb5bbbfd7035b176c43cc', class: "duet-drawer-label" }, this.label), h("div", { key: 'ae23d34e3a887a1cfeba35e5910f063c11cf9dda', class: "duet-drawer-caret" }, h("duet-icon", { key: 'bb81c870a1198501e359604bce56ebf96cda8fbb', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'c7c799cf3339eb3e23001101f9de59faaff3c3b8', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",

package/lib/collection/components/duet-number-input/duet-number-input.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: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -27,8 +27,8 @@
   min-width: calc(33.333% - 8px);
   max-width: 100%;
   line-height: 1.25;
-  text-align: left;
   vertical-align: bottom;
+  text-align: left;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
@@ -70,10 +70,21 @@
   width: 50%;
   height: 100%;
   text-align: center;
-  cursor: pointer;
-  background: transparent;
   -webkit-appearance: none;
   appearance: none;
+  cursor: pointer;
+  background: transparent;
+}
+.duet-number-buttons .duet-number-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-number-buttons .duet-number-button[aria-disabled=true], .duet-number-buttons .duet-number-button:disabled {
   pointer-events: none;
@@ -84,15 +95,8 @@
 .duet-number-buttons .duet-number-button:active duet-icon {
   transform: translateY(1px);
 }
-.duet-number-buttons .duet-number-button:focus {
-  outline: 0;
-}
 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
   z-index: 2;
-  box-shadow: 0 0 0 2px #0077b3 !important;
-}
-.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 .duet-number-buttons .duet-number-button:first-of-type {
   border-left: 1px solid rgb(181, 198, 208);
@@ -114,6 +118,7 @@
   position: absolute;
   top: 20%;
   left: 0;
+  z-index: -1;
   width: 1px;
   height: 60%;
   content: "";
@@ -131,5 +136,5 @@
   background: linear-gradient(to left, rgba(178, 194, 205, 0.2) 0%, rgba(178, 194, 205, 0.2) 1px, rgba(178, 194, 205, 0.1) 1px, rgba(178, 194, 205, 0) 100%);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before {
-  background: #d4dde2;
+  background: rgb(212, 221, 226);
 }

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

@@ -947,7 +947,7 @@ export class DuetNumberInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "tooltip": {

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

@@ -3,9 +3,9 @@
   top: 0;
   left: 0;
   display: block;
+  visibility: visible;
   width: 100%;
   height: 100%;
-  visibility: visible;
   background: rgb(8, 42, 77);
   opacity: 0.3;
 }
@@ -107,5 +107,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-overlay.duet-theme-turva {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }

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-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;
@@ -49,6 +49,9 @@
   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-paragraph.duet-inherit-color {
+  color: inherit !important;
+}
 .duet-paragraph.duet-paragraph-small {
   font-size: 0.875rem;
 }
@@ -106,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-paragraph/duet-paragraph.js

@@ -11,6 +11,7 @@ import { getColorByName } from "../../utils/token-utils";
 export class DuetParagraph {
     constructor() {
         this.id = createID("duet-paragraph");
+        this.inheritingParents = ["duet-alert"];
         this.theme = "";
         this.margin = "auto";
         this.size = "medium";
@@ -32,7 +33,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: '6c38dc5fb6f87779ecd9ea5b619940c7f867f52d', "aria-describedby": this.id }, h("p", { key: '8f022c00f776608c4f37b84de10e7fe8224552d9', id: this.id, class: {
+        return (h(Host, { key: 'ae1829736233d0cca98338cea16cc7100c5a934a', "aria-describedby": this.id }, h("p", { key: '39c89484d021d8e468607b50509ef3c280d7e8a2', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -40,7 +41,8 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '0a60d3f54e35dc856a508c399dfe965695761324' }))));
+                "duet-inherit-color": !this.color && this.inheritingParents.some(p => this.element.closest(p)),
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'd6e51ca09e84d7659ef95d10a5702c967351a5e7' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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,19 +23,19 @@ 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;

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

@@ -634,7 +634,7 @@ export class DuetPhoneInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "tooltip": {