@duetds/components 9.17.0 → 9.18.0

package/lib/collection/components/duet-show-more/duet-show-more.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;
 }
 
@@ -41,17 +41,20 @@
   display: block;
 }
 .duet-show-more .content: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-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva, .duet-theme-turva2 .duet-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-show-more.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);
 }
-.duet-show-more.duet-theme-turva .content:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 
 :host(.duet-theme-turva2) .duet-show-more.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -96,7 +96,7 @@ export class DuetShowMore {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: 'aa3781bcb009ab2f72dce109180c32c29e5a86d5', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '79305d6a5745287d4baeda24e227cd0ee2e6cd28', class: { "slotted-content": true } }, h("slot", { key: 'b75e7fbce1ab1e8e1680bc88cca241d0a8503375' }))), h("duet-button", { key: '103cd44aef5b443ed759a845f684db2e9881b67c', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'c185219d1cbab88f4efb3e254dc3130c432f83f6' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '6afaf121c58138f90038b80120d2078f26c03b0f', ref: ref => (this.contentElement = ref), class: { content: true, "duet-theme-turva": this.theme === "turva" }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'dae368a22e7ccf39355af66f099c03affeb903a8', class: { "slotted-content": true } }, h("slot", { key: '0a343674cab958718bf41cf81fa7f50377ef88a2' }))), h("duet-button", { key: 'b099b8982f27b745619611d11b5d1fad9122c97f', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '3e653ae12786956661bcf4be192514d56ff9fcf3' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,30 +4,30 @@
   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;
   height: 100%;
 }
 
 ::slotted(*) {
   position: relative;
-  width: 100%;
   visibility: hidden;
+  width: 100%;
   opacity: 0;
   transition: opacity 300ms ease;
   transition-delay: 300ms;
@@ -103,8 +103,14 @@
   cursor: pointer;
 }
 .duet-slideout .dialog .top 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-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
@@ -135,8 +141,8 @@
 }
 .duet-slideout .dialog.hidden {
   bottom: 100vh;
-  pointer-events: none;
   visibility: hidden;
+  pointer-events: none;
   transition: 300ms ease;
 }
 .duet-slideout .dialog.hidden .items {
@@ -156,9 +162,6 @@
   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);
 }
-.duet-slideout.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-slideout.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
@@ -172,9 +175,6 @@
   background: rgb(245, 247, 250);
   border-bottom: 1px solid rgb(222, 224, 228);
 }
-.duet-slideout.duet-theme-turva .dialog .top button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 
 slot {
   color: rgb(8, 42, 77);
@@ -184,29 +184,29 @@ slot {
 }
 
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg {
-    background: #172a3b;
+    background: rgb(23, 42, 59);
   }
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: #fdf7f2;
-  border-bottom-color: #fbe1d1;
+  background: rgb(253, 247, 242);
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) slot {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -264,12 +264,13 @@ export class DuetSlideout {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '2bcc71858b33eb7031d874753e5b56ae08d27232', moveFocusTo: this.closeButton }), h("div", { key: 'e93b3e3e696fed7a15af0b629cdc75d4e6c6a42e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3264075d1c8a40dd86f3fd0e54f6c0c3fd14042a', class: "top" }, h("button", { key: '65e408749cc6f7ee8c01d1d261cc610df794f3fc', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '2bcc71858b33eb7031d874753e5b56ae08d27232', moveFocusTo: this.closeButton }), h("div", { key: 'e93b3e3e696fed7a15af0b629cdc75d4e6c6a42e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3264075d1c8a40dd86f3fd0e54f6c0c3fd14042a', class: "top" }, h("button", { key: 'a3f4bdaa53dc0db03844bb7eb22ebf24bf13ca97', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '0e81890e31a7c1935f81687260391f8a4efee1dc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'a337d39c4c83b1f55addb400087a26a359f46167', class: "sticky-header" }, h("slot", { key: '4a06486e639fac6b9fa5844e8b4bb0ad30ebe50a', name: "sticky-header" }))), h("div", { key: '3f809bf568d2364e7aaf4ffe4974a7a221b8fbb5', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '20b4c13d074068a108d641d35774379c8a0e09c0', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e1b6159ff375a7e954c2a08c7b83012bd0584efd', class: "sticky-header" }, h("slot", { key: '8da80f3f654ad32fc3dbd60f973cfc67a3f05395', name: "sticky-header" }))), h("div", { key: '9b937ee229143cbed731694b1fdaee6f3d901569', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '61358e482b8f13d7facf58c55618bd6c45e044f9' })), h(FocusGuard, { key: 'bb6241de5b1dd23f17300cb51361bb10b4e6bfc6', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '1c039519309719e4a4b71d13355c719af6755a77' })), h(FocusGuard, { key: 'bd10152d30a0ae84320b6dda7cf18833abf1f1dc', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.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-slideout-lang {
@@ -55,5 +55,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva ::slotted(:not(:last-child))::after {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-slideout-link/duet-slideout-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%;
 }
@@ -42,11 +42,14 @@
   text-decoration: none;
 }
 .duet-slideout-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-slideout-link:focus, .duet-slideout-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-slideout-link:focus, .duet-slideout-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout-link:focus, .duet-slideout-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-slideout-link.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";
@@ -121,11 +124,11 @@ slot[name=description]::slotted(*) {
 }
 
 :host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva.active .label-content::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) slot[name=description]::slotted(*) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.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%;
 }
 
@@ -57,6 +57,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-slideout-panel .link:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-slideout-panel .link:focus, .duet-slideout-panel .link:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout-panel .link:focus, .duet-slideout-panel .link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-slideout-panel .link .duet-slideout-icon {
   position: relative;
   display: inline-flex;
@@ -88,10 +98,6 @@
   font-size: 1.25rem;
   font-weight: 800;
 }
-.duet-slideout-panel .link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-slideout-panel .link.active .label-text {
   position: relative;
 }
@@ -116,10 +122,10 @@
   top: 0;
   right: 0;
   z-index: 600;
+  visibility: visible;
   width: min(450px, 100%);
   height: 100%;
   overflow-y: auto;
-  visibility: visible;
 }
 .duet-slideout-panel .dialog.hidden {
   visibility: hidden;
@@ -152,8 +158,18 @@
 }
 .duet-slideout-panel .top .back:focus,
 .duet-slideout-panel .top .close: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-slideout-panel .top .back:focus, .duet-slideout-panel .top .back:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout-panel .top .back:focus, .duet-slideout-panel .top .back:focus.duet-theme-turva2,
+.duet-theme-turva .duet-slideout-panel .top .close:focus,
+.duet-slideout-panel .top .close:focus.duet-theme-turva,
+.duet-theme-turva2 .duet-slideout-panel .top .close:focus,
+.duet-slideout-panel .top .close:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-slideout-panel .top duet-icon {
   padding: 16px;
@@ -196,9 +212,6 @@
   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);
 }
-.duet-slideout-panel.duet-theme-turva .link:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
   background: rgb(198, 12, 48);
 }
@@ -209,10 +222,6 @@
   background: rgb(245, 247, 250);
   border-bottom: 1px solid rgb(222, 224, 228);
 }
-.duet-slideout-panel.duet-theme-turva .top .back:focus,
-.duet-slideout-panel.duet-theme-turva .top .close:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-slideout-panel.duet-theme-turva .top span {
   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);
@@ -230,21 +239,21 @@ slot:not([name=label]) {
 }
 
 :host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: #fdf7f2;
-  border-bottom-color: #fbe1d1;
+  background: rgb(253, 247, 242);
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) slot:not([name=label]) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -158,19 +158,21 @@ export class DuetSlideoutPanel {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, this.badge && h("duet-indicator", { key: 'ab7fdbdf53e7a00de6d029caf32059da791cd8c6', variation: "change" }), h("button", { key: 'b82bc5cb3f6c0cab2c75d1221b89b197af62fccb', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && h("duet-indicator", { key: 'ab7fdbdf53e7a00de6d029caf32059da791cd8c6', variation: "change" }), h("button", { key: 'bb2ed0ca834c688335e09255fb0a7abadd443e65', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '36db3f1d56f979de83a419d9b146b10517766578', class: "duet-slideout-icon" }, h("duet-icon", { key: '40daa0bea7fa859523611fd4a321357f6417d29e', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: 'dca0924732de13136afc665ea749dbc7326af42a', class: "label" }, h("span", { key: '2d2cb8664580036b92d38c443067abe5104bcdb2', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '3a27effb385bcb69a00b36880a27cc2365d85387', name: "label" })), h("duet-icon", { key: '0c8f43acde619695b5dfb4a340384c6ff6c72b96', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'dc04111a0ccaf306e9d1f090de3ece36deba1cb7', ref: element => (this.dialog = element), class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'd2ceb81a5d356ed8cde8bb422eadfdca1f694b5b', class: "duet-slideout-icon" }, h("duet-icon", { key: '422f41f7a1721d55c213d1c3656ed35e71ab8f5a', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: 'cdfcaf9efde37a4cdd7797040aa7281aa9d14d03', class: "label" }, h("span", { key: 'bf85b1b0eb2fcf3e119e0e19c78e7d0bec4a81ac', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '47258033a5a31298804cf656039c429c462cf8ff', name: "label" })), h("duet-icon", { key: '1a134e002b4e54d7b2aba8462d46890b4cece1db', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '25fc33ae8ef77c513c4966a0b44e9d87ba979832', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '21c80b489ad5b2d99c6527c598642f08a110f012', moveFocusTo: this.closeButton }), h("div", { key: '94ecda012acf4236fbf0c4e6bb2ddf00f0dc1d85', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e971612fa04b42cae7278eea004030dd0196ff24', class: "top" }, h("button", { key: 'ebf4cd9537f5593d8531e3f8a4083619c37c3315', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '84d9b40827aa1b8e5651febd8a9e0b7af206bd21', moveFocusTo: this.closeButton }), h("div", { key: 'fb989b818bcdccacda4bd975a71fabe74bf07e17', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'bdc79ef4c0ca28dd92ac8808ae32142beeb68e68', class: "top" }, h("button", { key: '247fed3b9148060448c542e038a64b45ecb229fa', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: '203def1ac6d4a5f12739e1d65e408de037017af3', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'eb1ef1869555fed504b3379aa1dd0d0d1d8757a4' }, this.label.innerHTML), h("button", { key: '5f427bf5cb3ef229ff24623da9b7ad9ba0ffe90c', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7231ebeb54f08c90e946c8c2bdd9f7e5072ef8a8', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '697a04a9c44a76c1c523acc00299f1876694b580', class: "sticky-header" }, h("slot", { key: '474ad484641ecb1f1f4d85a8feaa2344693502f6', name: "sticky-header" }))), h("div", { key: '718778b6897b09783c1cb28c4d05a29c60a969e7', tabindex: "-1", role: "menu",
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'c019deaf0645e494c2eb6c3348a804490a904ce1', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'f9248737a100ea05c07aae78f30c2e4f606eb85a' }, this.label.innerHTML), h("button", { key: '64f1f447c272650ae5d82c77a3f7d90f6a411cbd', class: { "close": true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '3737094efd584ea8792fb742f1871984f099e761', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3fc932167f02adea970a4477eab2eea93e2c8db3', class: "sticky-header" }, h("slot", { key: '835722e1ea03d08dc53d674d2170844e582bb414', name: "sticky-header" }))), h("div", { key: '70131a1615c354acf6f46c6eca1116116960f8c6', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'c0ab6f7bea6779ea11e6f6d3fb9758c7ae96ff66' })), h(FocusGuard, { key: '1a537464c41b73e910b26f02eb6249451749a503', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '4a3b4ec54bbde2ec40c4184e2f8cbcb5030c507b' })), h(FocusGuard, { key: '5cb519614160903a84503fc21ab428518004f284', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-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;
   width: 100%;
   height: 100%;
 }
@@ -59,6 +59,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-slideout-panel-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-slideout-panel-dropdown button:focus, .duet-slideout-panel-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout-panel-dropdown button:focus, .duet-slideout-panel-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-slideout-panel-dropdown button .label {
   position: relative;
   display: flex;
@@ -66,10 +76,6 @@
   align-items: center;
   justify-content: center;
 }
-.duet-slideout-panel-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-slideout-panel-dropdown button.active .label::after {
   position: absolute;
   top: auto;
@@ -84,6 +90,7 @@
 }
 .duet-slideout-panel-dropdown .items {
   display: flex;
+  visibility: visible;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -91,28 +98,24 @@
   max-height: 1000px;
   padding: 4px 20px 8px 36px;
   overflow-y: auto;
-  visibility: visible;
+  scrollbar-width: none;
   transition: max-height 0.3s ease-in, padding-bottom 0.3s ease-in;
   -ms-overflow-style: none;
-  scrollbar-width: none;
 }
 .duet-slideout-panel-dropdown .items::-webkit-scrollbar {
   display: none;
 }
 .duet-slideout-panel-dropdown .items.hidden {
+  visibility: hidden;
   max-height: 0;
   padding: 0;
   overflow: hidden;
-  visibility: hidden;
   transition: max-height 0.3s ease-out, padding-bottom 0.3s ease-out;
 }
 .duet-slideout-panel-dropdown.duet-theme-turva button {
   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);
 }
-.duet-slideout-panel-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
   background: rgb(198, 12, 48);
 }
@@ -134,14 +137,11 @@ slot[name=label] {
 }
 
 :host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button {
-  color: #172a3b;
-}
-:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) slot {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -44,12 +44,14 @@ export class DuetSlideoutPanelDropdown {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'b6d9cfa6742285816254d8f800d0134cbab60392', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '428b9daa75c7a08099281e5ba581355fd74fbdc5', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'd47c45eda3b4efd847b762bf480f12529a017490', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: '6e7ca63c7898c2b71207f7a0d4c4ae5fd1e57383', class: "label" }, h("slot", { key: '3c9920b20aee4d50cde6494dcb1789c74bd785f1', name: "label" }), h("duet-icon", { key: 'b45531eb083d9819f941c20b70712e94cea1628b', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '1d6fc52322fe24684457bb1e03ba908a5496e200', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '7bd9a51a7a92f315b4b02ffef0d7708beb565a8c', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'b8670b3b90172b05734387490c087d7fa297acfa', class: "label" }, h("slot", { key: '4260ac6d881d202a789b65042644e2d05e81181d', name: "label" }), h("duet-icon", { key: '0933c33444d037ea0a2187dfc2b657f0805d4571', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'b244be18e4c62d771c5f6ef4b72cc05aa9bdf327', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'a74310df86c00bf3c2b547b16eb256adcb5681f3' })))));
+                "duet-theme-turva": this.theme === "turva",
+            } }, h("slot", { key: '3400e2a37bc908cfa04587297e35f63f3aba6044' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   display: block;
   width: 12px;

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

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -32,11 +32,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;
 }
 
 .duet-spinner {
@@ -98,5 +98,5 @@
   }
 }
 :host(.duet-theme-turva2) .duet-spinner {
-  color: #e61740 !important;
+  color: rgb(230, 23, 64) !important;
 }