@duetds/components 9.17.0 → 9.18.0

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.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;
   width: 100%;
   height: 100%;
 }
@@ -41,11 +41,14 @@
   text-decoration: none;
 }
 .duet-toolbar-dropdown-link: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-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link: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-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-dropdown-link .label {
   flex: 1;
@@ -69,11 +72,11 @@
 }
 
 :host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva.active {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva:hover {
-  background: #fbe1d1;
+  background: rgb(251, 225, 209);
 }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.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%;
 }
 
@@ -37,22 +37,19 @@
   line-height: 1.25;
   color: rgb(0, 75, 129);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
 .duet-toolbar-item:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
-.duet-toolbar-item:focus.primary {
-  box-shadow: 0 0 0 4px rgba(8, 42, 77, 0.3), 0 0 0 1px #033866;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-item:focus.primary, .duet-toolbar-item:focus.primary.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-item .duet-toolbar-icon {
   position: relative;
@@ -79,6 +76,11 @@
 .duet-toolbar-item.primary, .duet-toolbar-item.secondary {
   color: rgb(255, 255, 255);
 }
+.duet-toolbar-item.primary:focus, .duet-toolbar-item.secondary:focus {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-toolbar-item.primary[aria-expanded=true], .duet-toolbar-item.secondary[aria-expanded=true] {
   background: rgba(8, 42, 77, 0.2);
 }
@@ -151,8 +153,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-item.active::after.duet-theme-turva {
   background: rgb(198, 12, 48);
@@ -178,25 +180,25 @@ duet-indicator:has(+ .duet-toolbar-item .duet-toolbar-icon) {
 }
 
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:not(.primary) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
   background: rgba(23, 42, 59, 0.2);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover:not(.primary) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover.primary {
   background: rgba(23, 42, 59, 0.2);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva:not(.primary) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva.primary {
   background: rgba(23, 42, 59, 0.2);

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.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%;
 }
 
@@ -37,19 +37,27 @@
   line-height: 1.25;
   color: rgb(0, 75, 129);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-toolbar-link: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: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link: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-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-link.negative {
   color: rgb(255, 255, 255);
 }
+.duet-toolbar-link.negative:focus {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-toolbar-link.negative duet-icon {
   color: rgb(198, 225, 238);
 }
@@ -100,8 +108,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-link.active::after.duet-theme-turva {
   background: rgb(198, 12, 48);
@@ -118,21 +126,21 @@
 }
 
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
   background: transparent;
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover {
-  color: #172a3b;
-  background: #fdf7f2;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
   background: rgba(23, 42, 59, 0.2);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.active.negative {
   background: rgba(23, 42, 59, 0.2);

package/lib/collection/components/duet-tooltip/duet-tooltip-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;
 }
 
 .duet-tooltip-button {
@@ -38,6 +38,17 @@
   background: transparent !important;
   border-radius: 4px;
 }
+.duet-tooltip-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tooltip-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-tooltip-button.duet-theme-turva {
   color: rgb(198, 12, 48);
 }
@@ -53,16 +64,8 @@
 .duet-tooltip-button:hover.duet-tooltip-button-negative {
   color: rgb(255, 255, 255);
 }
-.duet-tooltip-button:focus {
+.duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus {
   background: transparent !important;
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tooltip-button:focus {
-  background: transparent !important;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
-}
-:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tooltip-button svg {
   width: 20px;
@@ -84,17 +87,17 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
+  vertical-align: top;
   text-align: left;
   white-space: normal;
-  vertical-align: top;
 }
 .duet-theme-turva .duet-tooltip-label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 :host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva:hover {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.css

@@ -4,28 +4,29 @@
   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: absolute;
   z-index: 950;
 }
 
 .duet-tooltip {
   position: relative;
+  visibility: hidden;
   width: 282px;
   min-height: 48px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -33,14 +34,13 @@
   font-weight: 400;
   line-height: 1.25;
   color: rgb(8, 42, 77);
-  visibility: hidden;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(212, 223, 229);
   border-radius: 4px;
   box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
-  transition: 300ms ease;
   transform-origin: 100% 100%;
+  transition: 300ms ease;
 }
 .duet-tooltip.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -133,13 +133,15 @@
   -webkit-overflow-scrolling: touch;
 }
 .duet-tooltip-content-area:focus {
-  outline: none;
+  outline: 0;
 }
 :host(.user-is-tabbing) .duet-tooltip-content-area:focus {
-  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-tooltip-content-area: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-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tooltip-content-area::-webkit-scrollbar {
   width: 4px;
@@ -169,42 +171,47 @@
   margin: 0 !important;
   line-height: normal;
   color: rgb(8, 42, 77);
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background: rgb(245, 248, 250);
   border-radius: 50%;
-  -webkit-appearance: none;
-  appearance: none;
 }
 .duet-tooltip-close:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva, .duet-theme-turva2 .duet-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
-.duet-theme-turva .duet-tooltip-close:focus {
+.duet-theme-turva .duet-tooltip-close {
   color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 
 :host(.duet-theme-turva2) .duet-tooltip {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip.duet-theme-turva {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.top::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-start::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-end::before {
-  border-top: 11px solid #d4dde2;
+  border-top: 11px solid rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-start::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-end::before {
-  border-bottom: 11px solid #d4dde2;
+  border-bottom: 11px solid rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip-content-area::-webkit-scrollbar-thumb {
-  background: #d4dde2;
+  background: rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-tooltip-close:focus {
-  color: #172a3b;
+:host(.duet-theme-turva2) .duet-tooltip-close {
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js

@@ -57,7 +57,10 @@ export class DuetTooltipPopup {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '7ad49fff09a690cae1a3089dc34028fbce775265', moveFocusTo: this.buttonEl }), h("div", { key: 'c5a92a166d28092b2c58ecbf3fb5f9074e254081', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: 'aa4ffe0b471baf807fcc21a4fcba7dd61872a614' })), h("div", { key: '541a8ca3aa8963840740481b632d95d31b040643', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'fdd6a17db7b4ca37ade95264d6c8024d45011af6', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '914f2a0fb4376f8033059f8c5fe34f42bb6e6672', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'ca76340b0f68ec1d424384f2adc3cea1de1d9e76', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '7a58123fa4fb824972ed724bf2ab67326f634617' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '079e18d721f95ca86e3b58818bdc4362ff5f528b', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '7ad49fff09a690cae1a3089dc34028fbce775265', moveFocusTo: this.buttonEl }), h("div", { key: 'cdb555570f31fce932bc6d56147cf76efae9f501', ref: element => (this.contentEl = element), class: {
+                "duet-tooltip-content-area": true,
+                "duet-theme-turva": this.theme === "turva",
+            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: '4a5489f0934a1c68009144d1eca7ee9ce88f57b0' })), h("div", { key: '3c887e43abbd48008c25bca97a15f99be665e67b', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '10ed930e95f17f466e15b55ade1018c6ee53de24', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '8969d8e0e0c18810ed481467abe7cb3f7102b684', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '1f57750997a186157b0779707e7857a53343f1d8', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'f748f051fc0b70d708b3af718754f86414a472e6' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'aced3b198a15712462ebd77d8e86fb3ba0eedd00', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tooltip/duet-tooltip.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;
   z-index: 200;
   display: inline-flex;
   width: auto;

package/lib/collection/components/duet-tray/duet-tray.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%;
 }
@@ -31,6 +31,7 @@
   left: 0;
   z-index: 399;
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   max-height: calc(100% - 8rem);
   padding: 16px 20px 16px 24px;
@@ -39,13 +40,23 @@
   font-weight: 400;
   line-height: 1.5;
   color: rgb(8, 42, 77);
-  visibility: hidden;
   background: rgb(240, 247, 250);
   border-bottom: 1px solid rgb(212, 223, 229);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
-  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
   transform: translateY(-4rem);
+  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
+}
+.duet-tray:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tray:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tray:focus, :host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tray:focus, :host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
   .duet-tray {
@@ -57,15 +68,6 @@
     padding: 16px 52px 16px 60px;
   }
 }
-.duet-tray:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tray:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-tray.duet-theme-turva {
   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);
@@ -104,20 +106,20 @@
 .duet-tray-expandable {
   position: relative;
   z-index: 100;
+  visibility: hidden;
   width: calc(100% + 46px);
   max-height: 0;
   overflow-y: auto;
-  visibility: hidden;
+  scrollbar-width: none;
   opacity: 0;
   transition: opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;
-  scrollbar-width: none;
 }
 .duet-tray-expandable::-webkit-scrollbar {
   display: none;
 }
 .duet-tray-expandable.active {
-  max-height: 500px;
   visibility: visible;
+  max-height: 500px;
   opacity: 1;
 }
 
@@ -145,6 +147,17 @@
   transition: transform 300ms ease;
   -webkit-tap-highlight-color: transparent;
 }
+.duet-tray-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tray-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tray-button:focus, :host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tray-button:focus, :host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 @media (min-width: 62em) {
   .duet-tray-button {
     margin-right: 16px;
@@ -161,28 +174,19 @@
 .duet-tray-button.duet-tray-is-expanded {
   transform: rotate(-180deg);
 }
-.duet-tray-button:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tray-button: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-tray-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-tray-button:active {
   box-shadow: none;
   opacity: 0.75;
 }
 
 :host(.duet-theme-turva2) .duet-tray.duet-theme-turva {
-  color: #172a3b;
-  background: #fdf7f2;
-  border-color: #fbe1d1;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+  border-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tray-expandable-content {
-  border-color: #fbe1d1;
+  border-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tray-button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }