@duetds/components 7.0.10 → 7.0.12

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

@@ -38,13 +38,16 @@
     width: 100% !important;
   }
 }
-:host.duet-select-variation-tiny {
+:host.duet-select-variation-tiny, :host.duet-select-variation-compact {
   position: relative;
   top: -2px;
   width: 72px;
   margin: 0 !important;
   vertical-align: baseline;
 }
+:host.duet-select-variation-compact {
+  width: auto;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -102,6 +105,10 @@ duet-tooltip {
   width: 81px;
   padding: 0 !important;
 }
+.duet-select-variation-compact .duet-select-wrapper {
+  padding: 0 !important;
+  line-height: 1;
+}
 .duet-select-wrapper select {
   position: absolute;
   top: 0;
@@ -125,27 +132,27 @@ duet-tooltip {
 }
 .duet-select-wrapper select:hover + .duet-select {
   border-color: rgb(144, 149, 153);
-  box-shadow: 0 0 0 1px rgb(144, 149, 153);
+  box-shadow: 0 0 0 1px #909599;
 }
 .duet-theme-turva .duet-select-wrapper select:hover + .duet-select {
   border-color: rgb(116, 116, 117);
-  box-shadow: 0 0 0 1px rgb(116, 116, 117);
+  box-shadow: 0 0 0 1px #0077b3;
 }
 .has-error .duet-select-wrapper select:hover + .duet-select {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-theme-turva.has-error .duet-select-wrapper select:hover + .duet-select {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-select-wrapper select:focus + .duet-select {
   border-color: rgb(0, 119, 179);
   outline: 0;
-  box-shadow: 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-select-wrapper select:focus + .duet-select {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .duet-theme-turva .duet-select-wrapper select:focus + .duet-select .duet-select-icon {
   color: rgb(23, 28, 58);
@@ -154,10 +161,10 @@ duet-tooltip {
   color: rgb(0, 119, 179);
 }
 .has-error .duet-select-wrapper select:focus + .duet-select {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-theme-turva.has-error .duet-select-wrapper select:focus + .duet-select {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-select-wrapper select[disabled] {
   cursor: default !important;
@@ -180,6 +187,9 @@ duet-tooltip {
 .duet-select-wrapper span.duet-keep-container-height {
   opacity: 0;
 }
+.duet-select-variation-compact .duet-select-wrapper span.duet-keep-container-height {
+  display: none;
+}
 
 .duet-select {
   position: absolute;
@@ -239,7 +249,7 @@ duet-tooltip {
 .duet-theme-turva .duet-select svg {
   color: rgb(23, 28, 58);
 }
-.duet-select-variation-tiny .duet-select {
+.duet-select-variation-tiny .duet-select, .duet-select-variation-compact .duet-select {
   width: 72px;
   min-width: inherit;
   padding: 0 !important;
@@ -248,9 +258,18 @@ duet-tooltip {
   font-weight: 600;
   text-align: center;
 }
-.duet-select-variation-tiny .duet-select duet-icon {
+.duet-select-variation-tiny .duet-select duet-icon, .duet-select-variation-compact .duet-select duet-icon {
   padding-left: 10px;
 }
+.duet-select-variation-compact .duet-select {
+  position: relative;
+  width: fit-content;
+  padding: 7px 16px !important;
+  font-size: 0.875rem;
+  line-height: 1.1;
+  text-align: right;
+  border-radius: 8px;
+}
 
 .duet-select-help {
   display: block;

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

@@ -146,20 +146,20 @@ export class DuetSelect {
     return (h(Host, { onClick: this.onClick, class: {
         "duet-m-0": this.margin === "none",
         "duet-expand": this.expand,
-        "duet-select-variation-tiny": this.variation === "tiny",
+        [`duet-select-variation-${this.variation}`]: true,
       } }, h("div", { class: {
         "duet-select-container": true,
         "duet-label-hidden": this.labelHidden,
         "duet-theme-turva": this.theme === "turva",
-        "duet-select-variation-tiny": this.variation === "tiny",
+        [`duet-select-variation-${this.variation}`]: true,
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
       } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
       return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
     }))), h("div", { class: {
         "duet-select": true,
-        "duet-select-variation-tiny": this.variation === "tiny",
-      }, "aria-hidden": "true" }, h("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+        [`duet-select-variation-${this.variation}`]: true,
+      }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-select"; }
   static get encapsulation() { return "scoped"; }
@@ -180,7 +180,7 @@ export class DuetSelect {
         "mutable": false,
         "complexType": {
           "original": "DuetSelectVariation",
-          "resolved": "\"default\" | \"tiny\"",
+          "resolved": "\"compact\" | \"default\" | \"tiny\"",
           "references": {
             "DuetSelectVariation": {
               "location": "local",
@@ -192,7 +192,7 @@ export class DuetSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variation of dropdown. -tiny is used for small numbers / tiny option ranges."
+          "text": "Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons,\nlike with compact pagination."
         },
         "attribute": "variation",
         "reflect": false,

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

@@ -106,7 +106,7 @@
 }
 .duet-slideout .dialog .top button:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
@@ -129,12 +129,15 @@
     transition: 300ms ease;
   }
 }
+.duet-slideout.duet-theme-turva .dialog {
+  box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1) inset;
+}
 .duet-slideout.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.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  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);
@@ -143,7 +146,7 @@
   background: rgb(198, 12, 48);
 }
 .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 rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
 ::slotted(*) {

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

@@ -41,15 +41,15 @@
   text-align: left;
   text-decoration: none;
 }
-.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";
-}
 .duet-slideout-link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-.duet-slideout-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+.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-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";
 }
 .duet-slideout-link.active span {
   position: relative;

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

@@ -78,7 +78,7 @@
 }
 .duet-slideout-panel .link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  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;
@@ -129,7 +129,7 @@
 .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 rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-slideout-panel .top duet-icon {
   padding: 16px;
@@ -157,14 +157,14 @@
   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 rgb(23, 28, 58);
+  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);
 }
 .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 rgb(23, 28, 58);
+  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";

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

@@ -68,7 +68,7 @@
 }
 .duet-slideout-panel-dropdown button:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  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;
@@ -111,7 +111,7 @@
   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 rgb(23, 28, 58);
+  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);

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

@@ -73,10 +73,10 @@
   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 rgb(0, 119, 179);
+  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-step-heading:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .is-complete .duet-step-heading:hover .duet-step-counter, .is-disabled .duet-step-heading:hover .duet-step-counter {
   background-color: #005f8f;

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -53,7 +53,7 @@
   .duet-submenu-bar .shadow-container .top-shadow {
     top: -80px;
     height: 80px;
-    box-shadow: 0 3px 6px rgba(0, 41, 77, 0.1);
+    box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
   }
 }
 @media (min-width: 62em) {
@@ -73,13 +73,13 @@
   line-height: 1.25;
   color: rgb(0, 41, 77);
 }
-.duet-submenu-bar button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
 .duet-submenu-bar button.active .caret {
   transform: rotate(180deg);
 }
+.duet-submenu-bar button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
 .duet-submenu-bar button .label {
   position: relative;
   display: flex;
@@ -172,7 +172,7 @@
   border-bottom: 1px solid rgb(228, 228, 230);
 }
 .duet-submenu-bar.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-submenu-bar.duet-theme-turva .items {
   background: rgb(245, 245, 247);
@@ -181,10 +181,10 @@
   background: rgba(23, 28, 58, 0.6);
 }
 .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
-  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
+  box-shadow: 0 2px 6px 0 rgba(23, 28, 58, 0.07);
 }
 @media (min-width: 62em) {
   .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
-    box-shadow: 0 3px 6px 0 rgba(117, 117, 117, 0.15);
+    box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1);
   }
 }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -9,7 +9,7 @@ export class DuetSubmenuBar {
   constructor() {
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
     this.boundMqlFunctions = [];
-    this.changeAriaProperties = () => {
+    this.handleMobileView = () => {
       if (this.mql[0].matches) {
         this.mobile = false;
         this.enableBodyScroll();
@@ -28,13 +28,17 @@ export class DuetSubmenuBar {
       if (this.nav) {
         enableBodyScroll(this.nav);
       }
-      enableBodyScroll(this.itemsContainer);
+      if (this.itemsContainer) {
+        enableBodyScroll(this.itemsContainer);
+      }
     };
     this.disableBodyScroll = () => {
       if (this.nav) {
         disableBodyScroll(this.nav, { reserveScrollBarGap: true });
       }
-      disableBodyScroll(this.itemsContainer, { reserveScrollBarGap: true });
+      if (this.itemsContainer) {
+        disableBodyScroll(this.itemsContainer, { reserveScrollBarGap: true });
+      }
     };
     this.checkIfHasItems = () => {
       const hasDropdownLinks = !!this.element.querySelector("duet-submenu-bar-dropdown-link");
@@ -47,7 +51,7 @@ export class DuetSubmenuBar {
     this.open = false;
     this.accessibleLabel = undefined;
   }
-  watchLanguageStateHandler(newValue) {
+  watchOpenStateHandler(newValue) {
     const open = newValue;
     if (open) {
       this.bodyScroll = false;
@@ -71,11 +75,11 @@ export class DuetSubmenuBar {
   connectedCallback() {
     this.nav = document.querySelector("duet-nav > [slot='mobile']");
     this.hasItems = this.checkIfHasItems();
-    this.changeAriaProperties();
+    this.handleMobileView();
     for (let i = 0; i < this.mql.length; i++) {
       // addEventListener is not available in Stencil hydrate
       if (this.mql[i].addEventListener) {
-        const bound = this.changeAriaProperties.bind(this);
+        const bound = this.handleMobileView.bind(this);
         this.mql[i].addEventListener("change", bound);
         this.boundMqlFunctions[i] = bound;
       }
@@ -222,7 +226,7 @@ export class DuetSubmenuBar {
   static get watchers() {
     return [{
         "propName": "open",
-        "methodName": "watchLanguageStateHandler"
+        "methodName": "watchOpenStateHandler"
       }];
   }
 }

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.css

@@ -69,10 +69,6 @@
   align-items: center;
   justify-content: center;
 }
-.duet-submenu-bar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown button.open {
     background: rgb(230, 242, 248);
@@ -81,6 +77,10 @@
 .duet-submenu-bar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
+.duet-submenu-bar-dropdown button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
 .duet-submenu-bar-dropdown button.active .label-text {
   position: relative;
 }
@@ -180,14 +180,14 @@
   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-submenu-bar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
     background: rgb(228, 228, 230);
   }
 }
+.duet-submenu-bar-dropdown.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after {
   background: rgb(198, 12, 48);
 }

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.css

@@ -40,19 +40,19 @@
   text-align: center;
   text-decoration: none;
 }
+.duet-submenu-bar-dropdown-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown-link {
     padding: 0.675rem 16px;
     font-size: 0.875rem;
   }
 }
-.duet-submenu-bar-dropdown-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-.duet-submenu-bar-dropdown-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 .duet-submenu-bar-dropdown-link.active .label {
   position: relative;
 }

package/lib/collection/components/duet-submenu-bar-link/duet-submenu-bar-link.css

@@ -45,6 +45,13 @@
   text-align: center;
   text-decoration: none;
 }
+.duet-submenu-bar-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-submenu-bar-link:focus, .duet-submenu-bar-link:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-link {
     flex-direction: column;
@@ -55,13 +62,6 @@
     color: rgb(0, 77, 128);
   }
 }
-.duet-submenu-bar-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-.duet-submenu-bar-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 @media (min-width: 62em) {
   .duet-submenu-bar-link.active {
     color: rgb(0, 119, 179);

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

@@ -173,10 +173,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tab-button:first-child {
   border-top-left-radius: 4px;
@@ -346,11 +346,10 @@
 }
 .duet-tab-group-content:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
 }
-.duet-theme-turva .duet-tab-group-content:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
+.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tab-group-content.checked-group-content {
   padding: 28px 0 28px 0;

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

@@ -159,7 +159,7 @@ duet-tooltip {
 }
 .duet-textarea[disabled] {
   color: rgb(101, 119, 135) !important;
-  cursor: default !important;
+  cursor: not-allowed !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
 }
@@ -168,33 +168,54 @@ duet-tooltip {
   background: rgb(245, 245, 247) !important;
   border-color: rgb(245, 245, 247) !important;
 }
+.duet-textarea[disabled]::-webkit-input-placeholder {
+  color: rgb(0, 41, 77);
+  opacity: 1 !important;
+  transition: color 300ms ease;
+}
+.duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
+  color: rgb(23, 28, 58);
+}
+.duet-textarea[disabled]::-moz-placeholder {
+  color: rgb(0, 41, 77);
+  opacity: 1 !important;
+}
+.duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
+  color: rgb(23, 28, 58);
+}
+.duet-textarea[disabled]:-ms-input-placeholder {
+  color: rgb(0, 41, 77);
+}
+.duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
+  color: rgb(23, 28, 58);
+}
 .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px rgb(144, 149, 153);
+  box-shadow: 0 0 0 1px #909599;
 }
 .duet-theme-turva .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px rgb(116, 116, 117);
+  box-shadow: 0 0 0 1px #0077b3;
 }
 .has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-theme-turva.has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-textarea:focus {
   border-color: rgb(0, 119, 179);
   outline: 0;
-  box-shadow: 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-textarea:focus {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-theme-turva.has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-textarea:not(:focus):not(:hover):invalid {
   box-shadow: none;

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

@@ -116,10 +116,10 @@ duet-label {
   background: #e38698;
 }
 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgba(0, 119, 179, 0.75);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75);
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75);
 }
 
 .duet-slider {
@@ -142,7 +142,7 @@ duet-label {
   content: "";
   background-color: rgb(255, 255, 255);
   border-radius: 50%;
-  box-shadow: 1px 0 2px #5d6266;
+  box-shadow: 1px 0 2px 0 #5d6266;
   transition: 300ms ease;
 }
 .duet-theme-turva .duet-slider {
@@ -150,5 +150,5 @@ duet-label {
 }
 .duet-theme-turva .duet-slider::before {
   background-color: rgb(255, 255, 255);
-  box-shadow: 1px 0 2px #414142;
+  box-shadow: 1px 0 2px 0 #00334d;
 }

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

@@ -54,13 +54,13 @@
   color: rgb(0, 41, 77);
   background: rgb(243, 249, 252);
 }
-.duet-toolbar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
 .duet-toolbar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
+.duet-toolbar-dropdown button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
 .duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open {
   color: rgb(0, 41, 77);
 }
@@ -110,7 +110,7 @@
   background: rgb(245, 245, 247);
 }
 .duet-toolbar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open {
   color: rgb(23, 28, 58);