@duetds/components 10.0.0-alpha.29 → 10.0.0-alpha.30

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

@@ -298,12 +298,13 @@ export class DuetSlideout {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '0dc00c309bd543a23e1ea874cb6398c2c39e1411', moveFocusTo: this.closeButton }), h("div", { key: '8d2adfc16b01db12ca6f7c47810cdee6021e5460', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e389d21af73e9d8163ca89a167f0bbd596ba3450', class: "top" }, h("button", { key: '2bd8df761d9064e5ef73c4ebc98485e1754afe2e', 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: '0dc00c309bd543a23e1ea874cb6398c2c39e1411', moveFocusTo: this.closeButton }), h("div", { key: '8d2adfc16b01db12ca6f7c47810cdee6021e5460', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e389d21af73e9d8163ca89a167f0bbd596ba3450', class: "top" }, h("button", { key: 'ac47b07bb9738ec69af8db1c8f2acc01b70bfc03', 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: 'cb4da32359194cfa8c1cea2d09f5ebdfae3d1537', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'ede6365d0ba52b6794916367a4e42535a3666b98', class: "sticky-header" }, h("slot", { key: '58a33822c3e852ebd1e69fdc6f4be40f76e3c8a8', name: "sticky-header" }))), h("div", { key: '216d18823ac4376220aa985f5043ff3aa293fd40', 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: 'bdcb201f72601e5a430bbe2b0653b08a8c2ead5d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e7ea3e266991f5ff6659de6e5cc20ef4ea7cff21', class: "sticky-header" }, h("slot", { key: 'a2d3344b22e38a2439dd5df39460d784d56beaf7', name: "sticky-header" }))), h("div", { key: 'a326e1e74d27ff368035519861e2acd607acf6c6', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '495d7d363e0b0697b0733bec84c57cd234cdfcc9' })), h(FocusGuard, { key: 'a74db283e802ea746bf2777ffb4bd36f35412886', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'a4edf66da57892a957d1e16e12ccaf7d1e6a6fb4' })), h(FocusGuard, { key: '976f9dc8217f77d115b0ef2ec246b4231b8d3282', 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

@@ -178,19 +178,21 @@ export class DuetSlideoutPanel {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, this.badge && h("duet-indicator", { key: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), h("button", { key: 'fe2d4c0f8dc01d791946a720592101e83dc016ea', 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: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), h("button", { key: '86db5918e585201320c57a8770ab850356bda06b', 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: 'b38f6287ae32328d38478369c11fcf53af075731', class: "duet-slideout-icon" }, h("duet-icon", { key: '7b8e0204a8a23daf0ece9b96b981921dd7dc6e84', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '15944b22ad22f757436034fb8ef1465d19caca6d', class: "label" }, h("span", { key: '7bed6412b760df7878162e7a683488ccf91b01e9', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '4700d12f643dd979d5c90a1bf193f9ef55e5e584', name: "label" })), h("duet-icon", { key: '99c0ce44ec6a8abec00a1379a3bbd695c728e873', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'ea37489cb1f9476b74c7e14311011293002791ef', ref: element => (this.dialog = element), class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '635addd38144863b546edd4d8792a26d4e8dd3c4', class: "duet-slideout-icon" }, h("duet-icon", { key: '3610a7e6ebcdf22fe198e4428538d559599c79c0', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '9b4d70cc570113c1e667ced944bccae1e4613398', class: "label" }, h("span", { key: '6f16630f451ef9ebd920462cd81df2cf92ab5312', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '80688a824da754215dcbfcd668ff8144880147d1', name: "label" })), h("duet-icon", { key: '205d74fef784d3db602fcccf61ba49dfb5995317', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '5be9dab7afdb48916100c5bfb8242eb061ba6c96', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: 'f936fd64a01150ec06f4007872e38ed39f2d13a3', moveFocusTo: this.closeButton }), h("div", { key: '12af8aafbb83a7470bdf6d43def68492ea0b950d', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '71ee6b6d138c1dfc009f41460f43676ba7ee405b', class: "top" }, h("button", { key: '8b1170da102425174dfe9ec6a12996cb3d1fa123', 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: 'ad7c4a34db3120b40ed51061125f05d69017b342', moveFocusTo: this.closeButton }), h("div", { key: 'af56281cf6a0a4c7355f48d17b66c5495e7982f9', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '676eca91428ce8439e68da74b59a0bc8d393f5a5', class: "top" }, h("button", { key: '2d8f3d984de8ca1efccc191115b7657a455c5ef9', 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: '99d2cf1b6a7b2584460187cce27f9f9f0713f58e', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '7c41e4f0d2f3c71cfaf03f3a0350f9d390b3e0ec' }, this.label.innerHTML), h("button", { key: '96024d91d7946d05f62fc2c7f051bfce152e07f7', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '89b82c6c543718835c92fcf8ed4c4b9882eea0fe', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3665563f52fa7947c426394d637447ae157e7a83', class: "sticky-header" }, h("slot", { key: '2db3b51deffa106264a66fddb59d2e614a7f1691', name: "sticky-header" }))), h("div", { key: 'e2e29f223e33babd0c6186802383f2f4578b5063', tabindex: "-1", role: "menu",
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'e2a19bcf68d13caeec8cd0d03e79d8f347436f84', class: { "close": true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '5e410d780eed931181591dd44c6d5d6281096edc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e798417e14455bde09f3ad7e27d204990b2b6d17', class: "sticky-header" }, h("slot", { key: 'bdafb4122d5c49b37933244930f66b1a171d9641', name: "sticky-header" }))), h("div", { key: '807f98f59416699cda295c7e2939faa6241e87bd', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'ebdc8c4f45b0670a30806ce49c1dbf812e47ec14' })), h(FocusGuard, { key: 'db918af81f016c137a0551589daf1b2848239817', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'a4239425381aff3fe79c099a7a0d471377cfc475' })), h(FocusGuard, { key: '7861bde566dea39216e74ae0a7b37e13d92562c3', 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

@@ -56,12 +56,14 @@ export class DuetSlideoutPanelDropdown {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '06d4e99fe87e549a17af9dc8100528b349ff51ba', 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: '887b98839351d36434969447057013fd8e7614ed', 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: '0822390f41e67611f8e441bea52420840e010f9e', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: '379e21cd716611030dc29ddf1caf36aa44ea722d', class: "label" }, h("slot", { key: '9f4235a7e7c71766070591db1fb2186cf11e395f', name: "label" }), h("duet-icon", { key: 'e138b8d3f0d3218d3585d463a5ee7202647ef623', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '64cb95df7ee047d6de44a0f4187beec77fd25770', 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: 'a3d25c295dd87dd7d7427c08776e74f93ff06539', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'f5721ac3bf32dc5d3a02c06c3945169f5191b8bf', class: "label" }, h("slot", { key: '408ea11afbdc9705cf7d972f6173ba5215f06bec', name: "label" }), h("duet-icon", { key: 'eba692bfd3ada8bbfdbe9eb6e51a01054f6f919a', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '13c263ac376bd1b412ba8c57aec55504da08557d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '83cd9c5df8e8e8399f10f4b709fcbb08bcabb919' })))));
+                "duet-theme-turva": this.theme === "turva",
+            } }, h("slot", { key: 'f582b50dca9e8127b6c4f0b6f9507f74f337ce7d' })))));
     }
     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;
 }

package/lib/collection/components/duet-step/duet-step.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;
 }
 
@@ -63,20 +63,22 @@
   align-items: center;
   border-radius: 4px;
 }
-.duet-step-heading[aria-disabled=false] {
-  cursor: pointer;
-}
 .duet-step-heading:focus {
   outline: 0;
 }
-.duet-step-heading:active {
-  opacity: 0.75;
-}
 :host(.user-is-tabbing) .duet-step-heading: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);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-step-heading:focus, :host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-step-heading:focus, :host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-step-heading:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-step-heading[aria-disabled=false] {
+  cursor: pointer;
+}
+.duet-step-heading:active {
+  opacity: 0.75;
 }
 .is-complete .duet-step-heading:hover .duet-step-counter, .is-disabled .duet-step-heading:hover .duet-step-counter {
   background-color: #005f8f;
@@ -200,12 +202,12 @@
 :host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-counter,
 :host(.duet-theme-turva2) .duet-theme-turva.is-current .duet-step-counter,
 :host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-counter {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,
 :host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter {
   background-color: #b81233;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-step-content-wrapper {
-  border-color: #fbe1d1;
+  border-color: rgb(251, 225, 209);
 }