@duetds/components 9.16.1 → 9.18.0

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 {
@@ -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

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

@@ -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);
 }

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

@@ -375,7 +375,7 @@ export class DuetCheckbox {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "theme": {

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;
@@ -48,10 +48,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 +145,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 +175,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 +293,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 +314,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 +326,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;
@@ -82,11 +82,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 +120,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 +204,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 +229,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 +428,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 +470,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 +513,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 +541,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(253, 247, 242);
+  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(253, 247, 242);
+  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(253, 247, 242);
   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-choice-group/duet-choice-group.js

@@ -261,7 +261,7 @@ export class DuetChoiceGroup {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "name": {