@duetds/components 9.17.0 → 9.19.0

package/lib/collection/components/duet-chip/duet-chip.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: 8px !important;
   margin-bottom: 12px !important;
   position: relative;
@@ -32,6 +32,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 8px !important;
+}
 
 :host(.input) {
   margin-top: 6px !important;
@@ -48,10 +51,10 @@
   display: block;
   width: 100%;
   padding: 1px;
-  hyphens: none;
   line-height: 1.1;
   color: rgb(8, 42, 77) !important;
   text-align: center;
+  hyphens: none;
   cursor: pointer;
   background: rgb(255, 255, 255);
   border-color: rgb(181, 198, 208);
@@ -145,17 +148,17 @@
   padding-right: 12px;
 }
 .duet-chip-container duet-icon:not(.check-mark) {
-  width: auto;
   visibility: visible;
-  transition: width 300ms ease, transform 300ms ease;
+  width: auto;
   transform: scaleX(1);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container duet-icon.check-mark {
+  visibility: hidden;
   width: 0;
   overflow: hidden;
-  visibility: hidden;
-  transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(0);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container.duet-chip-filter-checked, .duet-chip-container.duet-chip-radio-checked {
   padding: 0 !important;
@@ -175,17 +178,17 @@
   padding-right: 10px;
 }
 .duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark), .duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark) {
+  visibility: hidden;
   width: 0;
   overflow: hidden;
-  visibility: hidden;
-  transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(0);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark, .duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark {
-  width: auto;
   visibility: visible;
-  transition: width 300ms ease, transform 300ms ease;
+  width: auto;
   transform: scaleX(1);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva {
   background: rgb(255, 241, 241);
@@ -293,11 +296,16 @@
 
 :host(.user-is-tabbing) .duet-chip-focus,
 :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button {
-  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);
 }
-:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,
-:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.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-chip-focus, :host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-chip-focus, :host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva2,
+.duet-theme-turva :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,
+:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva,
+.duet-theme-turva2 :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,
+:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-chip-container input,
@@ -309,11 +317,11 @@
   width: 100%;
   height: 100%;
   margin: 0;
+  appearance: none;
   cursor: pointer;
   border-width: 2px;
   border-radius: 8px;
   opacity: 0;
-  appearance: none;
 }
 
 *::slotted([slot=input]:not([aria-disabled=true])) {
@@ -321,26 +329,26 @@
 }
 
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva {
-  color: #172a3b !important;
-  border-color: #b2c2cd;
+  color: rgb(23, 42, 59) !important;
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva:hover {
-  border-color: #e61740;
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked {
-  background: #fdf7f2;
-  border-color: #e61740;
+  background: rgb(253, 247, 242);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked:hover, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked:hover {
-  background: #fbe1d1;
+  background: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-popup-open {
-  background: #fdf7f2;
-  border-color: #b2c2cd;
+  background: rgb(253, 247, 242);
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input:hover {
-  border-color: #b2c2cd;
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-hover, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-selected {
-  border-color: #e61740;
+  border-color: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-choice/duet-checkmark.css

@@ -73,6 +73,6 @@
   }
 }
 :host(.duet-theme-turva2.duet-theme-turva) .checked .duet-checkmark-container {
-  background: #172a3b;
-  border-color: #172a3b !important;
+  background: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59) !important;
 }

package/lib/collection/components/duet-choice/duet-choice.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;
@@ -32,6 +32,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 16px !important;
+}
 @media (max-width: 35.9375em) {
   :host {
     width: 100%;
@@ -68,6 +71,9 @@
   :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
     margin-right: 0 !important;
   }
+  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type {
+    margin-right: 16px !important;
+  }
 }
 
 :host(:last-child:not(:only-child)) {
@@ -82,11 +88,11 @@
   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;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.1;
   color: rgb(8, 42, 77) !important;
   text-align: left;
+  -webkit-hyphens: auto;
+  hyphens: auto;
   background: rgb(255, 255, 255);
   border-width: 1px;
   border-radius: 8px;
@@ -120,8 +126,8 @@
   padding: calc(1rem + 1px);
   font-size: 1rem;
   font-weight: 600;
-  text-decoration: none;
   word-break: break-word;
+  text-decoration: none;
   cursor: pointer;
   border: 1px solid rgb(212, 223, 229);
   border-radius: 8px;
@@ -204,20 +210,13 @@ input:focus {
   outline: 0;
 }
 
-input:checked:focus + .duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3);
+input:focus + .duet-choice-label {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-
-input:not(:checked):focus + .duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-
-.duet-theme-turva input:checked:focus + .duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2);
-}
-
-.duet-theme-turva input:not(:checked):focus + .duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva input:focus + .duet-choice-label, input:focus + .duet-choice-label.duet-theme-turva, .duet-theme-turva2 input:focus + .duet-choice-label, input:focus + .duet-choice-label.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 input[disabled] + .duet-choice-label {
@@ -236,7 +235,7 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   border-color: rgb(98, 121, 138) !important;
 }
 input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label:active, input[disabled] + .duet-choice-label:focus {
-  box-shadow: none !important;
+  outline: none !important;
   opacity: 1 !important;
   transition: none !important;
 }
@@ -435,9 +434,13 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 
 :host(.user-is-tabbing) .duet-choice-info-container:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   display: block;
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-container:focus, :host(.user-is-tabbing) .duet-choice-info-container:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-choice-info-container:focus, :host(.user-is-tabbing) .duet-choice-info-container:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 :host(.disabled) .duet-choice-card-collapsible {
@@ -473,14 +476,25 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   justify-content: center;
   width: 57.6px;
   padding-top: 1.25rem;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(212, 223, 229);
   border-left: 0 none;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
-  -webkit-appearance: none;
-  appearance: none;
+}
+.duet-choice-info-toggle:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-choice-info-toggle:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-toggle:focus, :host(.user-is-tabbing) .duet-choice-info-toggle:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-choice-info-toggle:focus, :host(.user-is-tabbing) .duet-choice-info-toggle:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-choice-info-toggle[aria-expanded=true] {
   background: rgb(245, 248, 250);
@@ -505,15 +519,6 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-choice-info-toggle[disabled].duet-theme-turva .duet-choice-info-icon {
   color: rgb(143, 147, 158) !important;
 }
-.duet-choice-info-toggle:focus {
-  outline: none;
-}
-:host(.user-is-tabbing) .duet-choice-info-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-choice-info-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .checked + .duet-choice-info-toggle {
   border-left-color: rgb(0, 119, 179) !important;
 }
@@ -542,53 +547,53 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-choice-card {
-  color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-choice-label {
-  border-color: #b2c2cd;
+  border-color: rgb(178, 194, 205);
 }
 .info :host(.duet-theme-turva2) .duet-theme-turva .duet-choice-label {
-  border-color: #b2c2cd;
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label {
-  background: #fdf7f2;
-  border-color: #172a3b !important;
+  background: rgb(245, 246, 247);
+  border-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
-  border-color: #e61740;
+  border-color: rgb(230, 23, 64);
 }
 .duet-choice-label :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
-  background: #172a3b;
-  border-color: #172a3b !important;
+  background: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-info, :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-collapsible {
-  color: #172a3b;
-  border-color: #172a3b;
+  color: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-collapsible {
-  border-color: #b2c2cd;
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-collapsible.checked {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-info {
-  background: #fdf7f2;
-  border-color: #b2c2cd;
+  background: rgb(245, 246, 247);
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-checkmark-container {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-info-toggle {
-  border-color: #b2c2cd;
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-info-toggle[aria-expanded=true] {
-  background: #fdf7f2;
+  background: rgb(245, 246, 247);
   border-bottom-color: transparent;
 }
 
 :host(.duet-theme-turva2:not(.no-hover):not(.disabled):hover) > .duet-theme-turva.duet-choice-card-flextainer .duet-choice-label:not(.checked) {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2:not(.no-hover):not(.disabled):hover) > .duet-theme-turva.duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }

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

package/lib/collection/components/duet-collapsible/duet-collapsible.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;
 }
 
 ::slotted([slot=after-heading]) {
@@ -19,11 +19,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;
   margin-bottom: 16px !important;
   display: block;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -50,10 +50,10 @@
   font-size: 1rem;
   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;
 }
 @media (max-width: 35.9375em) {
   .duet-collapsible-content {
@@ -82,6 +82,17 @@
   cursor: pointer;
   border-radius: 4px;
 }
+.duet-collapsible-heading:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-collapsible-heading:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-collapsible-heading.full-width {
   width: 100%;
 }
@@ -101,6 +112,14 @@
 .duet-collapsible-heading .duet-collapsible-heading-content {
   min-width: 0;
 }
+.duet-collapsible-heading .duet-collapsible-heading-content ::slotted(*) {
+  padding: 0;
+  margin: 0;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  color: inherit !important;
+}
 .duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content + div {
   margin-left: 16px;
 }
@@ -120,15 +139,8 @@
   width: inherit;
   margin: inherit;
 }
-.duet-collapsible-heading:focus {
-  outline: 0;
-}
 :host(.user-is-tabbing) .duet-collapsible-heading:focus {
   border-radius: 4px;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
 .duet-collapsible-heading-icon {
@@ -142,6 +154,9 @@
 .duet-collapsible-heading-icon:last-child, .duet-collapsible-heading-icon:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > .duet-collapsible-heading-icon:last-of-type {
+  margin-right: 8px !important;
+}
 [aria-expanded=true] .duet-collapsible-heading-icon {
   transform: rotate(180deg);
 }
@@ -153,7 +168,7 @@
 }
 
 :host(.duet-theme-turva2) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-collapsible-content.duet-theme-turva,
 :host(.duet-theme-turva2) .duet-collapsible-heading.duet-theme-turva {

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

@@ -7,13 +7,14 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
+import { checkNamedSlotElement, getSlotTextContent, hasSlot } from "../../utils/slot-utils";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-after-heading - piercing selector for styling the after heading
  * @part duet-collapsible-content - piercing selector for styling the content
  * @slot after-heading - Content after the heading can be for example badges.
+ * @slot heading - Instead of using heading property you can also use a native h1..h6 heading. Do not use a duet-heading here.
  */
 export class DuetCollapsible {
     constructor() {
@@ -64,10 +65,11 @@ export class DuetCollapsible {
             if (this.heading) {
                 labelParts.push(this.heading);
             }
-            if (this.hasAfterHeading) {
-                labelParts.push(getElementsFromNamedSlot(this.element, "after-heading")
-                    .map(e => e.textContent.trim())
-                    .join(", "));
+            else if (this.hasHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "heading"));
+            }
+            if (this.hasAfterHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "after-heading"));
             }
             if (this.caption) {
                 labelParts.push(this.caption);
@@ -100,7 +102,9 @@ export class DuetCollapsible {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasAfterHeading = hasSlot(this.element, "after-heading");
+        this.hasAfterHeadingSlot = hasSlot(this.element, "after-heading");
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        checkNamedSlotElement(this.element, "heading", "h1, h2, h3, h4, h5, h6");
     }
     connectedCallback() {
         subscribeTabbingChange(this);
@@ -123,16 +127,16 @@ export class DuetCollapsible {
      * Always the last one in the class.
      */
     render() {
-        const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '7d31031b7dadd4155d8a3458ec08c93c7e3cf3c5', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: 'f00b09d4646d2a5c86761675c6e46d49af9319cc' }, h("button", { key: 'a53704d19ce0908a29670199215c180996ecc898', class: {
+        const HeadingTagName = this.headingLevel && !this.hasHeadingSlot ? sanitizeString(this.headingLevel) : "div";
+        return (h(Host, { key: '491c8d50564fe200f63bce1926984df56d988340', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '5b4014c7cd9911d38bb99f5552107244afb856b1' }, h("button", { key: 'a24f83bd274bd9b20ba6132da1a7a2859103eba6', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
-                "has-after-heading": this.hasAfterHeading,
+                "has-after-heading": this.hasAfterHeadingSlot,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'ce43b1e2dabc8910ecc4ed8484d45dca91ff4580', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '0b6b1110c4d5a265f67cd22849f3d264bab78849', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '26bc88a57fb37575d307c750fb956761f1dc4d23', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '380054a26a1ad98a8db9e5b87b1fb5e02f40d3a1', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'c1a4f4b35f20b0c6206ad22ec0789fd9fe73f0ca', part: "duet-collapsible-after-heading" }, h("slot", { key: '5d4b47626ddaba28522b080d60efd6e19d72dd57', name: "after-heading" })))), this.caption && (h("div", { key: '3fe2e63e633411be26b8f9382420922b864a09fb', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'c6e38e01e467852441c075013df51aa4e44c89a3', size: "small", margin: "none" }, this.caption))))), h("div", { key: '6dd09c8172dda9a8819f5e41d5cf84431f748bd1', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '2377257e231c64d5d8a9719d0527cd618d68c80d' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'b748199f0715c1236573441ac601a174a104a89c', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '5abc89da39733fcf24605f919971b87053f2c3b5', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '4ad7a599fcf2198838b85fe531ab32eae005c235', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '19b333d50cf04db0aefffd763ecdbfd487884069', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: '0bccd472b3eb373b2a2d725e4c40aa8ee2705706', part: "duet-collapsible-after-heading" }, h("slot", { key: '39f90f69cd933d6f7d7657e593126a01589f63b7', name: "after-heading" })))), this.caption && (h("div", { key: '5fc18d8f1e8010c368d49770ed89371ed2e09457', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'd83d5d514cd020a7f97b0e19d0afe7e61b500582', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'd9687fa0fb07e389ea350ec3448f935d3fc8e332', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '423d7640d82b84912f65637ff6f9d490502373a6' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,11 +2,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;
   position: relative;
   display: inline-block;
   width: 100%;
@@ -31,8 +31,8 @@
 }
 
 :host(.duet-theme-turva2.duet-theme-turva) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2.duet-theme-turva) a {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-contact-card/duet-contact-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-bottom: 12px !important;
   display: block;
 }
@@ -85,5 +85,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-contact-card.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }