npm - @duetds/components - Versions diffs - 9.17.0 → 9.18.0 - Mend

@duetds/components 9.17.0 → 9.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (900) hide show

package/lib/collection/components/duet-button/duet-button.css CHANGED Viewed

@@ -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;
@@ -127,7 +127,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 +136,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 +291,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 +332,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 +344,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 +394,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 +479,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 +575,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 +589,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 +622,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(251, 225, 209);
 }
 :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(251, 225, 209);
 }
 :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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 {
@@ -274,11 +277,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);
+}
+.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-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;
+: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 +531,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 +548,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(251, 225, 209);
 }

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

@@ -78,7 +78,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 +105,10 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: 'b229fd28e5e5058ba357db373f25c9de68dc2694', class: {
+        return (h(Host, { key: '0df974f46d041de1e662425099375c3a7d1a4930', 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: '0a128da0eff230a20db8b3842e8a5d86e6735701', 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 +118,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: '1a6a47b88fb600849eaa9cc8d5108a41bd24b9ce', class: "duet-card-image-mask" }, h("img", { key: '3010252456dd0e210f11f32341a28c87ac872f4c', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'e5a1a24dfdb0d8d6d247333361f0f7bcccb05b0e', class: "duet-card-content", id: this.cardId }, h("slot", { key: '59044d033fc2b54dde397f5f18a424331208e54e' }), this.hasFooter && (h("div", { key: 'd9019dd209622eb7efbe267a7f7acf607956a3fa', class: "duet-card-footer" }, h("slot", { key: 'de1adb73d91026f80345564e24784df9c3fc3ee0', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-checkbox/duet-checkbox.css CHANGED Viewed

@@ -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;
@@ -47,8 +47,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 +106,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 +187,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);
 }