@duetds/components 10.0.0-alpha.29 → 10.0.0-alpha.30

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

@@ -75,7 +75,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: '8e479735705a8fc5cbe67b78dc74d63eb351abb1', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'ca59fe0d082b54c7fcb3725d7ab17d9bcbdea992', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'bb932a867cca710efa77488065fea73293daddab', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '642577f6fcd203efd73700e4c553502aa2d56733', class: "pre-heading" }, h("slot", { key: '153d63289a49239bc9aecdba096675757d4a1630', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '6a7cad0fc8841e0e65ddacd5d482d8df246923f6', class: "heading" }, h("duet-heading", { key: '5262b84f2429bc6c7e47876f24bc7139a8f1b46f', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '3cf56a75df5349003df143f2aa22cf439847a842' }, h("slot", { key: 'e6879565328b3898ee569cd7a13ad064da0686f7', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '1b6ce64573256914244b57f7a68297915846404c', class: "description" }, h("duet-paragraph", { key: '23e88abdcecce551c435aee9f927d64ec0e9ad61', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e4e17be56c742e06ecafce3b10245e4a8fbeac5c' }, h("slot", { key: '87a1787857492630ca860582bd92d967899e6b41', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'd24d4f1279e861f01dd9b36bd8bf6d2a765b9321', class: "action" }, h("slot", { key: '9abdd9f8370819e8d49ae68e7ee944d7bd970bdf', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '5b04a4485c4cdbeebe345e811fed2f5d5d6cfd78', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '28e164288916d963c8531ce34e627efe0f8524be', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'a2a51c2dfacdce6538b6e2c18167ec484cb6edf4', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'dccea674aa8af48ce2f6060579e9db2aa347c51c', class: "pre-heading" }, h("slot", { key: 'da7abc9ecdc0efffbe018759dd2f3cf9ade1ad49', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '65d14398e1f2dcb619b37d6a53d3af908532d1fd', class: "heading" }, h("duet-heading", { key: 'c8ef1c5e164dd0c2dfc2acd71eda724fdc35da47', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'a8bfb0a868c401aa697926f7312be6ab9d22b0fb' }, h("slot", { key: '7bb6e377adeea6912b18347369ebc4fc34a33b10', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'b1107d6d1e10090c013deb373e19968de1246141', class: "description" }, h("duet-paragraph", { key: 'cbf6175a7fa66ed210f74a172943f78737344880', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '76bef436fa234317ba71fa8609e28f3d17149afc' }, h("slot", { key: 'a18d73d7d084a5094272716c2030aeb38e92c075', name: "description" }))))), this.hasActionSlot && (h("div", { key: '5536658b8273ddfbe3ecbeec94ece54b56f9a706', class: "action" }, h("slot", { key: 'b642ea21fafd203ddbfa9dfebeb386491d09c3d2', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-radio/duet-radio.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: 28px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -74,9 +74,9 @@
   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;
-  hyphens: auto;
   line-height: 1.5;
   color: rgb(8, 42, 77);
+  hyphens: auto;
   word-break: break-word;
   overflow-wrap: break-word;
   cursor: pointer;
@@ -97,8 +97,8 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 .duet-radio-container {
@@ -122,10 +122,17 @@
   border-color: rgb(23, 28, 58);
 }
 .duet-label.focus::before {
-  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-label.focus::before, .duet-label.focus::before.duet-theme-turva, .duet-theme-turva2 .duet-label.focus::before, .duet-label.focus::before.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-label.focus::before {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-label.checked::after {
   position: absolute;
@@ -182,21 +189,21 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-label {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio + label::before {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio:checked + label::after {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label::before {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]:checked + label::after {
-  background: #7891a4;
-  border-color: #7891a4;
+  background: rgb(120, 145, 164);
+  border-color: rgb(120, 145, 164);
 }

package/lib/collection/components/duet-radio-group/duet-radio-group.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%;
 }