@duetds/components 9.17.0 → 9.18.0

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-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;
@@ -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,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-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-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;
@@ -56,24 +56,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 +103,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;

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

@@ -58,7 +58,7 @@ export class DuetPromoCard {
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: '6c2f3bc4656a8fdace5aa5c9d871dafe76f36484', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '5b937c96ac8b623cbeb5e6c280dba1e19744d67c', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '7dddf830e713a82cfed044e9846cfbaaed422d76', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '8aa7b7e2c6781e15d2a4a6bdbba72fbd1135384f', class: "pre-heading" }, h("slot", { key: 'cb0fa806c7517362d4da2ab9870de84dfcbc8c16', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'a6a86cd4c7d75b2c0649d416bf286c04e4e28dbf', class: "heading" }, h("duet-heading", { key: 'eac343c0aa5b97e8d708be8f60893caa961cda4d', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '0b25be163809e467df3efe5c4803ba29cb548297' }, h("slot", { key: '7a054f1b24cd8d813da34c62911c6b22bfd52613', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'ae147d63613bfb30bcd55188741a88817a6268b9', class: "description" }, h("duet-paragraph", { key: 'fcdd8b0f8c9863ee1fde670de8689464b093aa48', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'cae433f1bc9c9483bec0e92076e2b137ed489001' }, h("slot", { key: '8b26833d0c320e0df13b6f47170914c604e6a0a1', name: "description" }))))), this.hasActionSlot && (h("div", { key: '718dbe99fd6852116a62a6fdda6b23059fe2911d', class: "action" }, h("slot", { key: '2524edf69cde6300e52045a9069637465658623f', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'b2e8ca1f06923cab98d7336c7062c071bcfc261f', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '0a8ce33fc1051205cac9d8d2ac24bfa073848343', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '5cc34aee907a48571fef7d7702940c56a456f109', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'a832b2964afdbc503fe20c3b1cc9e06ad503639e', class: "pre-heading" }, h("slot", { key: 'cd32235d60380db53c044df70c45ae0fab54ab92', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '01d5f808a6d8df027cce500a243244a77f22d4bd', class: "heading" }, h("duet-heading", { key: '432e098ec916ea2cfb50f5c3b227ccbc79cb46ae', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'c21c360ec6e50de46c62b62e8719588296ce48bf' }, h("slot", { key: '8643c8b20cb1d3aa6bb48c0bcf79f4bcdf7626f9', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '8220fc6e3a21f9434d962321afc9ba95d6095de8', class: "description" }, h("duet-paragraph", { key: '3cfd920c2aaed2185d3869e0f22a5b8c79dcc830', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '83121871c669e008e8e66cfc3235b5e2a9bfa774' }, h("slot", { key: 'ace270926c69c31b27b91abae993671179aad975', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'de50b7e248230d0497635d62ca93c98a6bb25391', class: "action" }, h("slot", { key: '31ccf2f4a58b5b5cc025ca3c6598cebea6391947', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }