@duetds/components 9.17.0 → 9.19.0

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -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);
@@ -98,6 +101,7 @@
   min-width: 8rem;
   padding: 12px 14px !important;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 400;
@@ -105,7 +109,6 @@
   line-height: 1.5;
   color: rgb(8, 42, 77);
   text-align: left;
-  text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   background: rgb(255, 255, 255);
@@ -118,41 +121,46 @@
   text-overflow: ellipsis;
 }
 .duet-multiselect:hover {
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
   border-color: rgb(127, 150, 165);
-  box-shadow: 0 0 0 1px #909599;
+}
+.duet-theme-turva .duet-multiselect:hover, .duet-multiselect:hover.duet-theme-turva, .duet-theme-turva2 .duet-multiselect:hover, .duet-multiselect:hover.duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-theme-turva .duet-multiselect:hover {
   border-color: rgb(143, 147, 158);
-  box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-multiselect:hover {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-multiselect:hover {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-multiselect:focus, .duet-multiselect.duet-multiselect-active {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   border-color: rgb(0, 119, 179);
-  outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
+.duet-theme-turva .duet-multiselect:focus, .duet-multiselect:focus.duet-theme-turva, .duet-theme-turva2 .duet-multiselect:focus, .duet-multiselect:focus.duet-theme-turva2, .duet-theme-turva .duet-multiselect.duet-multiselect-active, .duet-multiselect.duet-multiselect-active.duet-theme-turva, .duet-theme-turva2 .duet-multiselect.duet-multiselect-active, .duet-multiselect.duet-multiselect-active.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-theme-turva .duet-multiselect:focus, .duet-theme-turva .duet-multiselect.duet-multiselect-active {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .has-error .duet-multiselect:focus, .has-error .duet-multiselect.duet-multiselect-active {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-multiselect:focus, .duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-multiselect[disabled] {
   color: rgb(8, 42, 77) !important;
   cursor: default !important;
+  outline: none !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
-  box-shadow: none !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
@@ -218,18 +226,18 @@
 .duet-multiselect-checkboxes {
   position: absolute;
   z-index: 700;
+  visibility: hidden;
   width: 100%;
   padding: 16px;
   margin: 8px 0 0;
-  visibility: hidden;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(212, 223, 229);
   border-radius: 4px;
   box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   opacity: 0;
-  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
   transform: scale(0.96) translateZ(0) translateY(-20px);
   transform-origin: top right;
+  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
 }
 .duet-theme-turva .duet-multiselect-checkboxes {
   background: rgb(255, 255, 255);
@@ -239,8 +247,8 @@
 .duet-multiselect-checkboxes.duet-multiselect-checkboxes-active {
   visibility: visible;
   opacity: 1;
-  transition-property: transform, opacity;
   transform: scale(1.0001) translateZ(0) translateY(0);
+  transition-property: transform, opacity;
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons {
   padding: 8px 0;
@@ -259,11 +267,14 @@
   border-radius: 4px;
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons 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-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus, .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button: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-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus, .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus.duet-theme-turva, .duet-theme-turva2 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus, .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child {
   border-right: 1px solid rgb(212, 223, 229);
@@ -322,36 +333,36 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect:focus,
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect.duet-multiselect-active {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect[disabled] {
-  color: #172a3b !important;
-  background: #f5f6f7 !important;
-  border-color: #f5f6f7 !important;
-  -webkit-text-fill-color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect svg {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect .duet-multiselect-badge {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
   background: #e8eaeb;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes {
-  border-color: #d4dde2;
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-nav/duet-nav.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%;
 }
 

package/lib/collection/components/duet-notification/duet-notification.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%;
 }
@@ -36,13 +36,13 @@
   cursor: pointer;
 }
 :host(:first-of-type) .duet-notification {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--notification-border-top-radius, 8px);
+  border-top-right-radius: var(--notification-border-top-radius, 8px);
 }
 :host(:last-of-type) .duet-notification {
   border-bottom: 0;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: var(--notification-border-bottom-radius, 8px);
+  border-bottom-left-radius: var(--notification-border-bottom-radius, 8px);
 }
 .duet-notification.duet-theme-turva {
   color: rgb(23, 28, 58);
@@ -69,11 +69,13 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-notification:focus-within {
+  outline: 2px solid;
+  outline-offset: -2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 1;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-notification-container {
@@ -146,17 +148,17 @@
 }
 
 :host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
-  color: #172a3b;
-  border-bottom-color: #fbe1d1;
+  color: rgb(23, 42, 59);
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
-    background: #fdf7f2;
+    background: rgb(251, 235, 225);
   }
 }

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

@@ -5,6 +5,7 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 export class DuetNotification {
     constructor() {
         this.language = getLanguage();
@@ -42,12 +43,18 @@ export class DuetNotification {
     async setFocus(options) {
         this.linkElement.focus(options);
     }
+    getAriaLabelText() {
+        const slottedElements = getElementsFromDefaultSlot(this.element);
+        const slottedText = slottedElements.map(e => e.textContent.trim()).join(". ");
+        const indicatorText = this.highlight ? `${this.accessibleLabelUnread}. ` : "";
+        return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
+    }
     render() {
-        return (h("div", { key: 'd277f46ce75b675a1b2dc80863ab5c6e79608d77', role: "listitem", class: {
+        return (h("div", { key: '5818ed344341a4a8b2f3924c5bebcdb32fdcb624', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '64c9209bdab15027121f6c52ef86327ce415f685', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '9fa32762c6c1805a3c15d1a57f5882c82d36607d', class: "duet-notification-container" }, h("div", { key: '80bb71a20d0c3f7c23d455758025b080e128ca35', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '4ea88060a28ed5abad5ff09dbf9fcdbab758bdf9', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'b3c53a5318b7dae17185948ba480ee2665e8f67e', class: "duet-notification-content" }, h("slot", { key: '88463f9aeca48107382f18f377132015ef037115' })), h("div", { key: 'cac28a3e91a692ae7ad32bdb95768b1c39141c54', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'bc48f0cc673e62d599c92bbfe62e9d2f071aa218', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: '225bba19f4b8e4f6904260d8c482af31e0615ea7', class: "duet-notification-container" }, h("div", { key: '00719c35eecb0f2073532b13d6baf67f15dd6313', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'b2cca7dafc46f20de25127773a7c02c377e46bde', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '8d950debef17e307570eaa36666de6a0e0347bec', class: "duet-notification-content" }, h("slot", { key: '7d672776e4e826fee3deb51f83fd4d7626a32d5b' })), h("div", { key: '01fe9a4420c8cdfd4943e42b17206a1a1380588a', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.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%;
 }
@@ -41,6 +41,7 @@
   height: 48px;
   padding: 0 20px;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 400;
@@ -48,15 +49,25 @@
   line-height: 48px;
   color: rgb(8, 42, 77);
   text-align: left;
-  text-decoration: none;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background-color: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(212, 223, 229);
   border-radius: 0;
-  -webkit-appearance: none;
-  appearance: none;
+}
+.duet-drawer-toggle:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-drawer-toggle:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
   .duet-drawer-toggle {
@@ -81,15 +92,6 @@
 .duet-drawer-toggle:active {
   opacity: 0.75;
 }
-.duet-drawer-toggle:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-drawer-toggle:hover {
   color: rgb(0, 75, 129);
 }
@@ -110,8 +112,8 @@
     height: 3px;
     content: "";
     background: rgb(0, 119, 179);
-    transition: 300ms ease;
     transform: translateY(3px);
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-toggle::after {
     background: rgb(198, 12, 48);
@@ -166,9 +168,9 @@
   margin-left: 8px;
   line-height: normal;
   pointer-events: none;
-  transition: 300ms ease;
   transform: translateY(-50%);
   transform-origin: 50% 50%;
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-drawer-caret {
@@ -198,15 +200,17 @@
 }
 @media (min-width: 62em) {
   .duet-drawer-content {
+    --notification-border-top-radius: 0;
+    --notification-border-bottom-radius: 4px;
     position: absolute;
     top: 100%;
     z-index: 600;
     display: block;
+    visibility: hidden;
     width: 450px;
     max-height: 420px;
     padding-left: 0;
     overflow-y: auto;
-    visibility: hidden;
     background-color: rgb(255, 255, 255);
     border: 1px solid rgb(212, 223, 229);
     border-radius: 4px;
@@ -214,9 +218,9 @@
     border-top-right-radius: 0;
     box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
     opacity: 0;
-    transition: 300ms ease;
     transform: scale(0.95) translateZ(0) translateY(-10px);
     transform-origin: 50% 0;
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-content {
     background-color: rgb(255, 255, 255);
@@ -240,14 +244,14 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true],
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
-  color: #8c001e;
-  border-color: #f5f6f7;
+  color: rgb(140, 0, 30);
+  border-color: rgb(245, 246, 247);
 }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -99,7 +99,10 @@ export class DuetNotificationDrawer {
         return (h("div", { key: '469b8f1022a88519a9f0aa400d56641c29e11b88', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '00b263a2e4980db5c31e03994c347871b024b588', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '2cde7596baa2aa3ab9465213d5e5b500c33310f3', class: "duet-drawer-icon" }, h("duet-icon", { key: '220c78141beee80d57077b270e8521b633128201', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '25ccfdf0643a4e7d41a36479cf43dc94db12df4f', variation: "change" }))), h("span", { key: '9b416e1ddcbc0acaab40f5c8bc6c5f9885037c8f', class: "duet-drawer-label" }, this.label), h("div", { key: '157c0eeaf53edadea7ee8f8c6f4a526d055960ac', class: "duet-drawer-caret" }, h("duet-icon", { key: '8f0e4deafa0f3550173266e0934dae7fb2dfcc99', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'e77866382b60d4c6bdf4d2526f9913a333e563b8', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '7eb53b799e595aef176ea46d17da5f57ab11b2a1', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+                "duet-drawer-toggle": true,
+                "duet-theme-turva": this.theme === "turva",
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '11d791ee5ede9eb8a17cff532fac041251ef71f3', class: "duet-drawer-icon" }, h("duet-icon", { key: '9a3d90082ade25df364bac86f434a3f71e80e5e8', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: 'da255d1b1ae3f08edcd078484a0645302ced9e9a', variation: "change" }))), h("span", { key: '4143c21837a70b682f2fb5bbbfd7035b176c43cc', class: "duet-drawer-label" }, this.label), h("div", { key: 'ae23d34e3a887a1cfeba35e5910f063c11cf9dda', class: "duet-drawer-caret" }, h("duet-icon", { key: 'bb81c870a1198501e359604bce56ebf96cda8fbb', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'c7c799cf3339eb3e23001101f9de59faaff3c3b8', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",

package/lib/collection/components/duet-number-input/duet-number-input.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -27,12 +27,15 @@
   min-width: calc(33.333% - 8px);
   max-width: 100%;
   line-height: 1.25;
-  text-align: left;
   vertical-align: bottom;
+  text-align: left;
 }
 :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);
@@ -70,10 +73,21 @@
   width: 50%;
   height: 100%;
   text-align: center;
-  cursor: pointer;
-  background: transparent;
   -webkit-appearance: none;
   appearance: none;
+  cursor: pointer;
+  background: transparent;
+}
+.duet-number-buttons .duet-number-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-number-buttons .duet-number-button[aria-disabled=true], .duet-number-buttons .duet-number-button:disabled {
   pointer-events: none;
@@ -84,15 +98,8 @@
 .duet-number-buttons .duet-number-button:active duet-icon {
   transform: translateY(1px);
 }
-.duet-number-buttons .duet-number-button:focus {
-  outline: 0;
-}
 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
   z-index: 2;
-  box-shadow: 0 0 0 2px #0077b3 !important;
-}
-.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 .duet-number-buttons .duet-number-button:first-of-type {
   border-left: 1px solid rgb(181, 198, 208);
@@ -114,6 +121,7 @@
   position: absolute;
   top: 20%;
   left: 0;
+  z-index: -1;
   width: 1px;
   height: 60%;
   content: "";
@@ -131,5 +139,5 @@
   background: linear-gradient(to left, rgba(178, 194, 205, 0.2) 0%, rgba(178, 194, 205, 0.2) 1px, rgba(178, 194, 205, 0.1) 1px, rgba(178, 194, 205, 0) 100%);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before {
-  background: #d4dde2;
+  background: rgb(212, 221, 226);
 }

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

@@ -3,9 +3,9 @@
   top: 0;
   left: 0;
   display: block;
+  visibility: visible;
   width: 100%;
   height: 100%;
-  visibility: visible;
   background: rgb(8, 42, 77);
   opacity: 0.3;
 }
@@ -107,5 +107,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-overlay.duet-theme-turva {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }