@duetds/components 9.17.0 → 9.19.0

package/lib/collection/components/duet-tab-group/duet-tab-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;
   -webkit-tap-highlight-color: transparent;
   display: block;
   width: 100%;
@@ -196,9 +196,9 @@
 .duet-tab-button.selected {
   z-index: 201;
   color: rgb(0, 119, 179);
+  outline: 0;
   background: rgb(255, 255, 255);
   border-bottom: 3px solid rgb(0, 119, 179);
-  outline: 0;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-tab-button.selected {
@@ -211,10 +211,12 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-tab-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-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-variation-default .duet-tab-button {
   z-index: 200;
@@ -252,9 +254,12 @@
   background-color: rgb(0, 119, 179);
 }
 .duet-tab-variation-default .duet-tab-button.selected:focus-visible {
-  outline: 2px solid rgba(0, 119, 179, 0.8);
+  outline: 2px solid;
   outline-offset: -5px;
-  box-shadow: none !important;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva, .duet-theme-turva2 .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-variation-default .duet-tab-button.selected:focus-visible::before {
   height: 0;
@@ -300,10 +305,6 @@
   color: rgb(45, 52, 79);
   background: rgb(234, 235, 239);
 }
-.duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  border-color: rgb(222, 224, 228);
-  outline-color: rgba(199, 202, 207, 0.8);
-}
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
   width: auto;
@@ -351,8 +352,8 @@
 .duet-tab-variation-checked .duet-tab-button {
   position: relative;
   display: inline-block;
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   width: 200px;
   min-width: 200px;
   padding: 8px 4px;
@@ -473,11 +474,14 @@
   text-align: left;
 }
 .duet-tab-group-content:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
+.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva, .duet-theme-turva2 .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-group-content.checked-group-content {
   padding: 28px 0 28px 0;
@@ -499,33 +503,23 @@
   background-color: rgb(113, 118, 132);
 }
 
-:host(.duet-theme-turva2) {
-  /* Plain variation: divider nude, hover & active underlines red */
-  /* Base tab button mapping + selected underline red, outer borders nude */
-  /* Default variation selected underline (uses ::before) should be red */
-  /* Default variation focus-visible border stays nude */
-  /* Checked variation selected state */
-}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-group-tabs.duet-tab-variation-plain {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover {
-  border-bottom: 2px solid #e61740;
+  border-bottom: 2px solid rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  border-bottom: 2px solid #e61740;
+  border-bottom: 2px solid rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button.selected {
-  color: #172a3b;
-  border-color: #fbe1d1;
-  border-bottom-color: #e61740;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
+  border-bottom-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
-  background-color: #e61740;
-}
-:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  border-color: #fbe1d1;
+  background-color: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -212,14 +212,15 @@ export class DuetTabGroup {
                 "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
                 selected: element.selected,
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
+                "duet-theme-turva": this.theme === "turva",
             }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
-        return (h("div", { key: '82bdbb06df621e50abe48e5112df78c99213c193', class: {
+        return (h("div", { key: '51383834734cbd21b65ec6c777f10a01e8768b9e', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '56bbfe2c4f72ffd7ca9f56df5df3f22bcb59ca3d', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'adc23a0fa4da0ce1c9d54e8a2e56fbbfb0e62903', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -230,11 +231,11 @@ export class DuetTabGroup {
             } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
                 "duet-tab-group-scrollable-wrapper": true,
                 "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: 'c26feb7c39a92f1a3d44d09fb2e97a9667e54f41', class: {
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: 'a99b36748d41112484ad3ff44449602467d7fa27', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'c6cb02cb9b42a53c57e63e9aafb505af31e9b2de' }))));
+            } }, h("slot", { key: '7ad5439efab3c4b036cd46bde973cb50090284bc' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,11 +2,11 @@ duet-table {
   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: block;
   font-variant-numeric: tabular-nums;
@@ -21,11 +21,11 @@ duet-table tr {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 duet-table.duet-m-0 {
   margin: 0 !important;
@@ -46,16 +46,16 @@ duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead * {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 duet-table.duet-theme-turva table {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 duet-table td {
+  color: rgb(8, 42, 77);
   -webkit-hyphens: auto;
   hyphens: auto;
-  color: rgb(8, 42, 77);
 }
 duet-table.duet-theme-turva td {
   color: rgb(23, 28, 58);
@@ -101,8 +101,8 @@ duet-table span.duet-table-cell-heading {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 .duet-table-flattened td {
   line-height: 1.25;
@@ -381,14 +381,14 @@ duet-table span.duet-table-cell-heading {
 }
 
 duet-table.duet-theme-turva2.duet-theme-turva td {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 duet-table.duet-theme-turva2.duet-theme-turva tbody th {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva.duet-table-sticky thead th,
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva.duet-table-sticky thead td {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
   background: rgba(23, 42, 59, 0.04);
@@ -397,27 +397,30 @@ duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva tbody:not(:only
   background: rgba(23, 42, 59, 0.04);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva tfoot td {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-plain.duet-theme-turva tbody th,
 duet-table.duet-theme-turva2.duet-table-plain.duet-theme-turva tbody td {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-plain.duet-theme-turva tbody td {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-fixed.duet-theme-turva:not(.duet-table-flattened) tfoot {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-sortable.duet-theme-turva:not(.duet-table-flattened) tfoot {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
+}
+duet-table.duet-theme-turva2.duet-theme-turva .duet-table-selected-column {
+  background: rgba(95, 122, 143, 0.08);
 }

package/lib/collection/components/duet-textarea/duet-textarea.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: block;
@@ -30,6 +30,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);
@@ -109,6 +112,16 @@ duet-tooltip,
   border-radius: 4px;
   transition: 150ms ease;
 }
+.duet-textarea:focus {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva, .duet-theme-turva2 .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-theme-turva .duet-textarea {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
@@ -192,35 +205,32 @@ duet-tooltip,
   color: rgb(23, 28, 58);
 }
 .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599;
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475;
+.duet-theme-turva .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-textarea:focus {
   border-color: rgb(0, 119, 179);
-  outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-textarea:focus {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-textarea:not(:focus):not(:hover):invalid {
-  box-shadow: none;
+  outline: none;
 }
 
 .duet-textarea-help {
@@ -250,8 +260,8 @@ duet-tooltip,
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 .duet-character-count {
@@ -260,33 +270,33 @@ duet-tooltip,
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled] {
-  background: #f5f6f7 !important;
-  border-color: #f5f6f7 !important;
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:-webkit-input-placeholder {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-moz-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-toggle/duet-toggle.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;
   -webkit-user-select: none;
@@ -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(.duet-m-0) {
   margin: 0 !important;
@@ -68,8 +71,8 @@ duet-label {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 .duet-switch input:checked + .duet-slider {
   background-color: rgb(0, 119, 179);
@@ -116,10 +119,12 @@ duet-label {
   background: #e38698;
 }
 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75);
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75);
+.duet-theme-turva :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-slider {
@@ -154,7 +159,7 @@ duet-label {
 }
 
 :host(.duet-theme-turva2) .duet-switch input:checked + .duet-slider {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-switch input:checked + .duet-slider::before {
   box-shadow: -1px 0 2px #890e26;

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   width: 100%;
 }
@@ -81,8 +81,8 @@
 }
 
 :host(.duet-theme-turva2) .duet-toolbar.duet-theme-turva .container {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-toolbar.duet-theme-turva.primary {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'ef985ffd5d6ace34e338b68d717e0ff4ddfba289' }, h("nav", { key: 'e7ca6e1aaa3342e2422c4ad43e6a52162f1b181e', class: {
+        return (h(Host, { key: '1f30018caa1ed9d7f4d378a051fd8bbe333bc53e' }, h("nav", { key: '3d6ddc1b3da13b175f0a057802a09f1032e6ac06', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '3c0c92fc2fdd0b5736bc9c61951d4269b24580f8', class: "container" }, h("div", { key: 'f9f17a0ed80a2c530caf8537857dfc76d51c4a50', class: "list", role: "list" }, h("slot", { key: '22cd0173e2588e554cbb8ef035da5d875b28927b', name: "left" })), h("div", { key: '28483b4d1a73201f840eb08fcbf5be41250142a1', class: "list", role: "list" }, h("slot", { key: '97e0bad5bdb1951d56d8c0bb30d031e1d0404d6c', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '621615924df868e74fc8c182def1f137a779a4d3', class: "container" }, h("div", { key: 'ffd68df78a9a03424dec5e9a9b2b8b60d8ac9096', class: "list", role: "list" }, h("slot", { key: 'b91e3fe5fd8f937542d0427bb2f01e0d9feccd90', name: "left" })), h("div", { key: '5cac1ab6c57c2640caaa4ec05a85437be418948f', class: "list", role: "list" }, h("slot", { key: '7d063c0c0c5116cd732ded57ddb5209db74c4300', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.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;
   height: 100%;
 }
 
@@ -44,6 +44,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-toolbar-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-toolbar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
@@ -57,10 +67,6 @@
 .duet-toolbar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
-.duet-toolbar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open {
   color: rgb(8, 42, 77);
 }
@@ -74,8 +80,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-dropdown .items {
   position: absolute;
@@ -109,9 +115,6 @@
   color: rgb(23, 28, 58);
   background: rgb(245, 247, 250);
 }
-.duet-toolbar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open {
   color: rgb(23, 28, 58);
 }
@@ -161,19 +164,19 @@
 }
 
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button:hover {
-  color: #172a3b;
-  background: #fdf7f2;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active::after,
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active,
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover,
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active,