@duetds/components 9.17.0 → 9.19.0

package/lib/collection/components/duet-button/duet-button.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;
@@ -34,6 +34,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 8px !important;
+}
 @media (max-width: 35.9375em) {
   :host {
     width: 100%;
@@ -46,6 +49,9 @@
 :host(.square):last-child, :host(.square):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.square):last-of-type {
+  margin-right: 12px !important;
+}
 
 :host(.input-button) {
   z-index: 250;
@@ -61,6 +67,10 @@
 :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-small):last-of-type,
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type {
+  margin-right: 4px !important;
+}
 @media (max-width: 35.9375em) {
   :host(.duet-small),
   :host(.duet-x-small) {
@@ -74,6 +84,9 @@
 :host(.duet-x-small):last-child, :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type {
+  margin-right: 2px !important;
+}
 
 :host(.square.duet-small),
 :host(.square.duet-x-small) {
@@ -84,6 +97,10 @@
 :host(.square.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.square.duet-small):last-of-type,
+[alignment=form-distribute] > :host(.square.duet-x-small):last-of-type {
+  margin-right: 8px !important;
+}
 
 :host(.duet-expand) {
   width: 100% !important;
@@ -127,7 +144,7 @@
   background: transparent;
   border-style: solid;
   border-width: 1px;
-  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, outline 300ms ease, padding 300ms ease, box-shadow 300ms ease;
+  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, padding 300ms ease, box-shadow 300ms ease;
 }
 .duet-button.duet-p-0 {
   padding: 0 !important;
@@ -136,11 +153,14 @@
   margin: 0 !important;
 }
 .duet-button: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-button:focus, .duet-button: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-button:focus, .duet-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-button:focus, .duet-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-button.duet-button-size-medium {
   height: 50px;
@@ -288,13 +308,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.default:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.default:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.default.duet-button-negative {
   background-color: rgb(255, 255, 255);
@@ -329,13 +349,6 @@
   background: rgb(126, 2, 35);
   border-color: rgb(126, 2, 35);
 }
-.duet-button.primary:focus, .duet-button.input-button-primary:focus, .duet-button.input-button-left-primary:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(0, 119, 179, 0.75);
-}
-.duet-theme-turva .duet-button.primary:focus, .duet-theme-turva .duet-button.input-button-primary:focus, .duet-theme-turva .duet-button.input-button-left-primary:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(23, 28, 58, 0.75);
-}
 .duet-button.secondary, .duet-button.input-button-secondary, .duet-button.input-button-left-secondary, .duet-button.input-button-embedded {
   color: rgb(8, 42, 77) !important;
   background: transparent;
@@ -348,6 +361,12 @@
 .duet-button.secondary:hover, .duet-button.input-button-secondary:hover, .duet-button.input-button-left-secondary:hover, .duet-button.input-button-embedded:hover {
   color: rgb(0, 119, 179) !important;
   border-color: rgb(0, 119, 179);
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
+}
+.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-theme-turva .duet-button.secondary:hover, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-theme-turva .duet-button.input-button-embedded:hover {
   color: rgb(198, 12, 48) !important;
@@ -392,13 +411,6 @@
   background: transparent;
   border-color: rgb(255, 255, 255);
 }
-.duet-button.negative:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
-.duet-theme-turva .duet-button.negative:focus {
-  box-shadow: 0 0 0 1px #0077b3, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
 .duet-button.destructive-primary {
   color: rgb(255, 255, 255) !important;
   background: rgb(214, 28, 82);
@@ -484,6 +496,9 @@
 .duet-button.plain.duet-button-negative:hover {
   color: rgba(255, 255, 255, 0.8) !important;
 }
+.duet-button.plain.duet-button-icon-only:focus {
+  outline-offset: 1px;
+}
 .duet-button.duet-button-icon-only {
   min-width: 48px;
   min-height: 48px;
@@ -577,13 +592,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.square:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.square:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.square .duet-button-contents {
   gap: 0;
@@ -591,17 +606,19 @@
 .duet-button[disabled], .duet-button[disabled]:hover, .duet-button.duet-button-negative[disabled], .duet-button.duet-button-negative[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
+  outline: none !important;
+  outline-color: rgb(212, 223, 229) !important;
+  outline-color: rgb(212, 223, 229) !important;
   background: rgb(212, 223, 229) !important;
   border-color: rgb(212, 223, 229) !important;
-  outline-color: rgb(212, 223, 229) !important;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button[disabled]:hover, .duet-theme-turva .duet-button.duet-button-negative [disabled], .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
   color: rgb(143, 147, 158) !important;
   cursor: not-allowed;
+  outline-color: rgb(222, 224, 228) !important;
   background: rgb(222, 224, 228) !important;
   border-color: rgb(222, 224, 228) !important;
-  outline-color: rgb(222, 224, 228) !important;
 }
 
 .duet-button-is-loading.primary, .duet-button-is-loading.input-button-primary {
@@ -622,77 +639,85 @@
   border-radius: 8px;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
-  color: #e61740 !important;
-  border-color: #fbe1d1;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default:hover {
-  border-color: #e61740;
-  outline-color: #e61740;
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative {
-  background-color: #fbe1d1 !important;
+  background-color: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative:hover {
-  color: #e61740 !important;
-  border-color: #e61740;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary {
-  background: #e61740;
-  border-color: #e61740;
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded {
-  color: #172a3b !important;
-  border-color: #172a3b;
+  color: rgb(23, 42, 59) !important;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded:hover {
-  color: #e61740 !important;
-  border-color: #e61740;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative {
-  color: #fbe1d1 !important;
+  color: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover {
-  color: #e61740 !important;
-  border-color: #e61740;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-embedded {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-secondary {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative {
-  color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative:hover {
   color: rgb(255, 255, 255) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain {
-  color: #e61740 !important;
+  color: rgb(230, 23, 64) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain.duet-button-negative {
   color: rgb(255, 255, 255) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain:hover {
-  color: #8c001e !important;
+  color: rgb(140, 0, 30) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled]:hover {
-  color: #5f7a8f !important;
+  color: rgb(95, 122, 143) !important;
   background: transparent !important;
-  border-color: #fbe1d1 !important;
+  border-color: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
-  border-color: #fbe1d1;
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square.duet-button-negative {
-  background: #e61740;
-  border-color: #e61740;
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square:hover {
-  border-color: #e61740;
-  outline-color: #e61740;
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled]:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
-  color: #7891a4 !important;
+  color: rgb(120, 145, 164) !important;
   cursor: not-allowed;
-  background: #d4dde2 !important;
-  border-color: #d4dde2 !important;
-  outline-color: #d4dde2 !important;
+  outline-color: rgb(212, 221, 226) !important;
+  background: rgb(212, 221, 226) !important;
+  border-color: rgb(212, 221, 226) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button-is-loading.default {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-callout/duet-callout.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: block;
   width: 100%;
@@ -69,5 +69,5 @@ figure {
 
 :host(.duet-theme-turva2) .duet-callout.duet-theme-turva .author,
 :host(.duet-theme-turva2) .duet-callout.duet-theme-turva blockquote {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-caption/duet-caption.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;
   margin-bottom: 16px !important;
   display: flex;
   flex: 0 0 100%;
@@ -15,8 +15,8 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(98, 121, 138);
   vertical-align: top;
+  color: rgb(98, 121, 138);
 }
 :host.duet-p-0 {
   padding: 0 !important;
@@ -48,5 +48,5 @@
 }
 
 :host(.duet-theme-turva2.duet-caption-selected.duet-theme-turva) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-card/duet-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: 20px !important;
   display: flex;
   width: 100%;
@@ -66,11 +66,14 @@
   margin: 0 !important;
 }
 .duet-card: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-card:focus, .duet-card: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-card:focus, .duet-card:focus.duet-theme-turva, .duet-theme-turva2 .duet-card:focus, .duet-card:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (max-width: 20.5em) {
   .duet-card.shadow-xxx-small {
@@ -255,6 +258,9 @@
     margin: 0;
   }
 }
+.duet-card-collapsed .duet-card-heading {
+  border-radius: var(--duet-card-border-radius);
+}
 .duet-card-image-mask + .duet-card-heading {
   border-radius: 0;
 }
@@ -274,11 +280,15 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {
-  border-radius: var(--duet-card-border-radius);
-  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-theme-turva .duet-card-heading.duet-card-heading--collapsible button:focus {
-  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-card-heading.duet-card-heading--collapsible button:focus, :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus, :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {
+  border-radius: var(--duet-card-border-radius);
 }
 .duet-card-collapsed .duet-card-heading {
   margin-bottom: 0 !important;
@@ -524,8 +534,8 @@
   height: auto;
   min-height: 1px;
   margin-left: -1%;
-  transition: transform 300ms ease;
   transform: scale(1.0001);
+  transition: transform 300ms ease;
 }
 
 a.duet-card {
@@ -541,19 +551,19 @@ a.duet-card:hover .duet-card-image {
   box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15);
 }
 a.duet-card:active {
-  transition: none;
   transform: translateY(1px);
+  transition: none;
 }
 
 :host(.duet-theme-turva2) .duet-card.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-card.duet-theme-turva.info {
-  background: #fdf7f2 !important;
+  background: rgb(253, 247, 242) !important;
 }
 :host(.duet-theme-turva2) .duet-card.duet-theme-turva .duet-card-heading {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-card.duet-theme-turva .duet-card-footer {
-  background: #fbe1d1;
+  background: rgb(245, 246, 247);
 }

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

@@ -45,6 +45,7 @@ export class DuetCard {
         this.icon = undefined;
         this.iconColor = "currentColor";
         this.image = undefined;
+        this.imageAlt = undefined;
         this.background = "gray-lightest";
         this.padding = "small";
         this.margin = "auto";
@@ -78,7 +79,9 @@ export class DuetCard {
         const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: this.iconColor }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
         if (this.collapsible) {
             const ariaLabel = (_a = getElementsFromNamedSlot(this.element, "heading")) === null || _a === void 0 ? void 0 : _a.map(e => e.textContent).join(" ");
-            return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { type: "button", "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false", "aria-label": ariaLabel }, headingContent)));
+            return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { type: "button", class: {
+                    "duet-theme-turva": this.theme === "turva",
+                }, "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false", "aria-label": ariaLabel }, headingContent)));
         }
         else {
             return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading" }, headingContent));
@@ -103,10 +106,10 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: 'b229fd28e5e5058ba357db373f25c9de68dc2694', class: {
+        return (h(Host, { key: 'd92cd6fb922f1165e1d341221ac3f5433252606c', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: 'b80082cae6d0e4d564bc1eca68f57749b6975e0e', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '7f870fc5061cd48c3464bd19ecd780fbb33f3e78', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -116,7 +119,7 @@ export class DuetCard {
                 "duet-card-has-bg": this.background !== "gray-lightest",
                 "duet-card-has-icon": !!this.icon,
                 "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: 'c4c9c8772d432e52fb78f2bf0a457d4a026d6b3a', class: "duet-card-image-mask" }, h("img", { key: '828ed65b312a0e50257adfa39f25307b13e7d51a', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: '081d59770bc88f9b7bd2a9b25d0bf905ea0d141b', class: "duet-card-content", id: this.cardId }, h("slot", { key: 'ad92895c2eea7a7697bd4924165656e72ee9b1da' }), this.hasFooter && (h("div", { key: '9a920473b4242e87a36032511f982b3e890df463', class: "duet-card-footer" }, h("slot", { key: '41350a63089d579579bca4454a1fcbc27a60b445', name: "footer" })))))));
+            } }, this.image && (h("div", { key: 'fd6822d5747d2882842c9c2392b28d8b7a2693f2', class: "duet-card-image-mask" }, h("img", { key: 'a1952cf1f82a4f8593130d9990ef27a2a982e5d8', src: this.image, class: "duet-card-image", loading: "lazy", alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'a11237f14582fad87aaab15e4dccad5c6ffd7b0b', class: "duet-card-content", id: this.cardId }, h("slot", { key: '80d250aa9dbb0f39a7683c6d2a1e1cdaca75cdd8' }), this.hasFooter && (h("div", { key: '87b27d7c69e3d5f3ab7bdb75cc76a1a11900ef0f', class: "duet-card-footer" }, h("slot", { key: '1212e0d9a33349cf68c7b667069077e02ee30197', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -378,6 +381,25 @@ export class DuetCard {
                 "attribute": "image",
                 "reflect": false
             },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "image-alt",
+                "reflect": false
+            },
             "background": {
                 "type": "string",
                 "mutable": false,

package/lib/collection/components/duet-checkbox/duet-checkbox.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;
   display: inline-flex;
@@ -30,6 +30,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 8px !important;
+}
 
 :host(:last-child:not(:only-child)) {
   margin-bottom: 0 !important;
@@ -47,8 +50,8 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(8, 42, 77);
   vertical-align: top;
+  color: rgb(8, 42, 77);
   cursor: pointer;
   background: transparent;
   transition: 300ms ease;
@@ -106,10 +109,17 @@
   border-color: rgb(23, 28, 58);
 }
 .duet-checkbox:focus + label::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-checkbox:focus + label::before, .duet-checkbox:focus + label::before.duet-theme-turva, .duet-theme-turva2 .duet-checkbox:focus + label::before, .duet-checkbox:focus + label::before.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-checkbox:focus + label::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-checkbox[aria-invalid=true] + label::before {
   background: #fdf4f6;
@@ -180,17 +190,17 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-label {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-checkbox + label::before {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-checkbox:checked + label::before {
-  background: #172a3b;
-  border-color: #172a3b;
+  background: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59);
 }