@duetds/components 7.0.10 → 7.0.12

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

@@ -24,6 +24,14 @@
   width: 100%;
 }
 
+::slotted(duet-breadcrumb) {
+  font-weight: 400;
+}
+
+::slotted(duet-breadcrumb:last-of-type) {
+  font-weight: 600;
+}
+
 .duet-breadcrumbs {
   position: relative;
   display: flex;
@@ -41,7 +49,7 @@
   min-height: 36px;
   margin: 0 28px;
 }
-.duet-breadcrumbs ol {
+.duet-breadcrumbs .list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -52,22 +60,6 @@
   color: inherit;
   list-style: none;
 }
-.duet-breadcrumbs ol li {
-  font-weight: 400;
-}
-.duet-breadcrumbs ol li:last-of-type {
-  font-weight: 600;
-}
-.duet-breadcrumbs .duet-breadrumbs-arrow {
-  display: inherit;
-  align-items: center;
-  justify-content: center;
-  width: 0.375rem;
-  height: 0.375rem;
-}
-.duet-breadcrumbs .hide {
-  display: none;
-}
 .duet-breadcrumbs .bottom-border {
   position: absolute;
   bottom: 0;
@@ -79,7 +71,7 @@
   color: rgb(0, 41, 77);
   background: rgb(243, 249, 252);
 }
-.duet-breadcrumbs.header ol duet-breadcrumb[href]:hover {
+.duet-breadcrumbs.header .list duet-breadcrumb[href]:hover {
   color: rgb(0, 77, 128);
 }
 .duet-breadcrumbs.header .bottom-border--nav {
@@ -115,15 +107,15 @@
     margin: 0 72px 0 48px;
   }
 }
-.duet-breadcrumbs.footer ol {
+.duet-breadcrumbs.footer .list {
   padding: 20px 0;
 }
 @media (min-width: 62em) {
-  .duet-breadcrumbs.footer ol {
+  .duet-breadcrumbs.footer .list {
     padding: 20px 8px;
   }
 }
-.duet-breadcrumbs.footer ol duet-breadcrumb[href]:hover {
+.duet-breadcrumbs.footer .list duet-breadcrumb[href]:hover {
   text-decoration: underline;
 }
 .duet-breadcrumbs.footer .bottom-border--container {

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

@@ -1,8 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-small";
-import { Build, Fragment, h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLocaleString } from "../../utils/language-utils";
 export class DuetBreadcrumbs {
@@ -55,7 +54,7 @@ export class DuetBreadcrumbs {
         "duet-breadcrumbs": true,
         "duet-theme-turva": this.theme === "turva",
         [this.variation]: true,
-      } }, h("div", { class: "container" }, h("ol", null, this.children.map((child, index) => (h(Fragment, null, index > 0 && (h("li", { "aria-hidden": "true" }, h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" }))), h("li", { innerHTML: child.outerHTML }), h("div", { class: "hide" }, h("slot", null)))))), h("div", { class: "bottom-border bottom-border--container" })), h("div", { class: "bottom-border bottom-border--nav" }))));
+      } }, h("div", { class: "container" }, h("div", { role: "list", class: "list" }, h("slot", null)), h("div", { class: "bottom-border bottom-border--container" })), h("div", { class: "bottom-border bottom-border--nav" }))));
   }
   static get is() { return "duet-breadcrumbs"; }
   static get encapsulation() { return "shadow"; }

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

@@ -108,6 +108,13 @@
 .duet-button.duet-m-0 {
   margin: 0 !important;
 }
+.duet-button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 .duet-button:not(.input-button-primary, .input-button-secondary, .input-button-embedded) {
   font-variant-numeric: tabular-nums;
 }
@@ -218,13 +225,6 @@
   right: -16px;
   left: auto;
 }
-.duet-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-theme-turva .duet-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 .duet-button:active:not([disabled]) {
   opacity: 0.75;
   transition: none;
@@ -269,7 +269,7 @@
 .duet-button.primary:hover, .duet-button.input-button-primary:hover {
   background: #005f8f;
   border-color: #005f8f;
-  box-shadow: 0 4px 20px rgba(34, 34, 34, 0.1);
+  box-shadow: 0 4px 20px 0 rgba(34, 34, 34, 0.1);
 }
 .duet-theme-turva .duet-button.primary:hover, .duet-theme-turva .duet-button.input-button-primary:hover {
   background: rgb(148, 9, 37);
@@ -277,10 +277,10 @@
 }
 .duet-button.primary:focus, .duet-button.input-button-primary:focus {
   outline: 0;
-  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 4px rgba(0, 119, 179, 0.75);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(0, 119, 179, 0.75);
 }
 .duet-theme-turva .duet-button.primary:focus, .duet-theme-turva .duet-button.input-button-primary:focus {
-  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 4px rgba(23, 28, 58, 0.7);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(23, 28, 58, 0.75);
 }
 .duet-button.secondary, .duet-button.input-button-secondary, .duet-button.input-button-embedded {
   color: rgb(0, 41, 77) !important;
@@ -337,10 +337,10 @@
 }
 .duet-button.negative:focus {
   outline: 0;
-  box-shadow: 0 0 0 1px rgb(0, 41, 77), 0 0 0 4px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7);
 }
 .duet-theme-turva .duet-button.negative:focus {
-  box-shadow: 0 0 0 1px rgb(23, 28, 58), 0 0 0 4px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 0 1px #0077b3, 0 0 0 4px rgba(255, 255, 255, 0.7);
 }
 .duet-button.destructive-primary {
   color: rgb(255, 255, 255) !important;
@@ -355,7 +355,7 @@
 .duet-button.destructive-primary:hover {
   background: #b21c4e;
   border-color: #b21c4e;
-  box-shadow: 0 4px 20px rgba(34, 34, 34, 0.1);
+  box-shadow: 0 4px 20px 0 rgba(34, 34, 34, 0.1);
 }
 .duet-theme-turva .duet-button.destructive-primary:hover {
   background: #b3220a;

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

@@ -58,10 +58,10 @@
 }
 .duet-card: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-theme-turva .duet-card:focus, .duet-card:focus.duet-theme-turva {
-  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;
 }
 @media (max-width: 20.5em) {
   .duet-card.shadow-xxx-small {
@@ -266,10 +266,10 @@
 }
 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {
   border-radius: 4px;
-  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-card-heading.duet-card-heading--collapsible 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-card-collapsed .duet-card-heading {
   margin-bottom: 0 !important;

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

@@ -106,10 +106,10 @@
   border-color: rgb(23, 28, 58);
 }
 .duet-checkbox:focus + label::before {
-  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-theme-turva .duet-checkbox:focus + label::before {
-  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-checkbox + label {
   position: static;

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

@@ -215,10 +215,10 @@
 }
 
 :host(.user-is-tabbing) .duet-chip-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-chip-focus.duet-theme-turva {
-  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-chip-container input {

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

@@ -203,7 +203,7 @@ input:focus {
 }
 
 :host(.user-is-tabbing) input:not(:checked):focus + .duet-choice-label {
-  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 input:checked:focus + .duet-choice-label {
@@ -211,7 +211,7 @@ input:focus {
 }
 
 :host(.user-is-tabbing).duet-theme-turva input:not(:checked):focus + .duet-choice-label {
-  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;
 }
 
 input[disabled] + .duet-choice-label {
@@ -455,7 +455,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   outline: none;
 }
 :host(.user-is-tabbing) .duet-choice-info-toggle: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-choice-info-toggle:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .checked + .duet-choice-info-toggle {
   border-left-color: rgb(0, 119, 179) !important;

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

@@ -109,10 +109,10 @@
 }
 :host(.user-is-tabbing) .duet-collapsible-heading:focus {
   border-radius: 4px;
-  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-collapsible-heading.duet-theme-turva: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-collapsible-heading-icon {

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.css

@@ -42,13 +42,13 @@
   outline: 0;
 }
 
-:host(.user-is-tabbing:focus) {
+:host(.user-is-tabbing:not(.descendant-focused):focus) {
   border-radius: 4px;
-  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:focus) {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+:host(.user-is-tabbing:not(.descendant-focused).duet-theme-turva:focus) {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
 .duet-cookie-consent {
@@ -106,10 +106,10 @@
 
 ::slotted(a: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-theme-turva ::slotted(a:focus) {
   outline: 0;
-  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;
 }

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -12,6 +12,16 @@ export class DuetCookieConsent {
     this.accessibleLabel = "Hyväksyn evästeiden käytön";
     this.theme = "";
   }
+  handleFocusIn(event) {
+    const eventPath = event.composedPath();
+    const actualEventTarget = eventPath[0];
+    if (actualEventTarget !== this.element) {
+      this.element.classList.add("descendant-focused");
+    }
+  }
+  handleFocusOut() {
+    this.element.classList.remove("descendant-focused");
+  }
   /**
    * Component lifecycle events.
    */
@@ -23,7 +33,7 @@ export class DuetCookieConsent {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { tabindex: "0" }, h("div", { class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: "duet-cookie-consent-content" }, h("div", { class: "expand" }, h("slot", null)), h("duet-spacer", { size: "large", direction: "horizontal" }), h("div", null, h("duet-button", { variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+    return (h(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: "duet-cookie-consent-content" }, h("div", { class: "expand" }, h("slot", null)), h("duet-spacer", { size: "large", direction: "horizontal" }), h("div", null, h("duet-button", { variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
   }
   static get is() { return "duet-cookie-consent"; }
   static get encapsulation() { return "shadow"; }
@@ -106,4 +116,19 @@ export class DuetCookieConsent {
       }];
   }
   static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "focusin",
+        "method": "handleFocusIn",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusout",
+        "method": "handleFocusOut",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -94,7 +94,7 @@
 }
 .duet-date-button:disabled {
   pointer-events: none;
-  cursor: default;
+  cursor: not-allowed;
   background: rgb(245, 248, 250) !important;
   border: 0 !important;
 }
@@ -117,11 +117,11 @@
   color: rgb(0, 119, 179);
   border-color: transparent;
   outline: 0;
-  box-shadow: 0 0 0 2px rgb(0, 119, 179);
+  box-shadow: 0 0 0 2px #0077b3 !important;
 }
 .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 2px rgb(23, 28, 58);
+  box-shadow: 0 0 0 2px #171c3a !important;
 }
 
 .duet-date-dialog {
@@ -281,12 +281,12 @@
   z-index: 200;
   color: rgb(0, 77, 128) !important;
   background: rgb(243, 249, 252) !important;
-  box-shadow: 0 0 0 1px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 0 1px #0077b3 !important;
 }
 .duet-theme-turva .duet-date-table-button.today {
   color: rgb(148, 9, 37) !important;
   background: rgb(252, 243, 244) !important;
-  box-shadow: 0 0 0 1px rgb(198, 12, 48) !important;
+  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .duet-date-table-button[aria-pressed=true], .duet-date-table-button:focus {
   color: rgb(255, 255, 255) !important;
@@ -301,19 +301,19 @@
   z-index: 200;
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
-  box-shadow: 0 0 5px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 5px 0 #0077b3 !important;
 }
 .duet-theme-turva .duet-date-table-button:active {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
-  box-shadow: 0 0 5px rgb(198, 12, 48) !important;
+  box-shadow: 0 0 5px 0 #171c3a !important;
 }
 .duet-date-table-button:focus {
   z-index: 200;
-  box-shadow: 0 0 5px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 5px 0 #0077b3 !important;
 }
 .duet-theme-turva .duet-date-table-button:focus {
-  box-shadow: 0 0 5px rgb(198, 12, 48) !important;
+  box-shadow: 0 0 5px 0 #171c3a !important;
 }
 .duet-date-table-button.disabled {
   color: rgb(144, 149, 153) !important;
@@ -394,10 +394,10 @@
   opacity: 0;
 }
 .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px rgb(0, 119, 179);
+  box-shadow: 0 0 0 2px #0077b3 !important;
 }
 .duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px rgb(23, 28, 58);
+  box-shadow: 0 0 0 2px #171c3a !important;
 }
 
 .duet-date-dialog-mobile-header {
@@ -472,7 +472,7 @@
 }
 .duet-date-picker-close:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgb(0, 119, 179);
+  box-shadow: 0 0 0 2px #0077b3 !important;
 }
 @media (min-width: 36em) {
   .duet-date-picker-close:focus {
@@ -480,5 +480,5 @@
   }
 }
 .duet-theme-turva .duet-date-picker-close:focus {
-  box-shadow: 0 0 0 2px rgb(23, 28, 58);
+  box-shadow: 0 0 0 2px #171c3a !important;
 }

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

@@ -84,11 +84,11 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-footer a: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 a: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-footer-wrapper {
@@ -211,7 +211,7 @@ duet-logo {
 }
 .duet-theme-turva .duet-footer-icon {
   background: transparent;
-  box-shadow: 0 0 0 1px rgb(255, 255, 255);
+  box-shadow: 0 0 0 1px #fff;
 }
 a:hover .duet-footer-icon {
   background: #006ba1;

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

@@ -310,10 +310,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-header-items .duet-header-item: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-header-items .duet-header-item: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;
 }
 @media (min-width: 62em) {
   .duet-header-items .duet-header-item {
@@ -376,10 +376,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-header-toggle: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-header-toggle: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;
 }
 @media (min-width: 62em) {
   .duet-header-toggle {
@@ -519,10 +519,10 @@ button {
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-header-button: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-header-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-header-button:active {
   opacity: 0.75;
@@ -720,10 +720,10 @@ button {
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-header-dropdown-toggle: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-header-dropdown-toggle: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-header-dropdown-toggle:active {
   outline: none;
@@ -933,10 +933,10 @@ button {
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):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-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):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-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
   padding-right: 36px;
@@ -1002,10 +1002,10 @@ button {
 }
 .duet-header-skip: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-theme-turva .duet-header-skip:focus, .duet-header-skip:focus.duet-theme-turva {
-  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-theme-turva .duet-header-skip {
   min-width: 120px;

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

@@ -1459,10 +1459,10 @@ duet-heading + duet-button {
 }
 .duet-hero-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-theme-turva .duet-hero-link:focus, .duet-hero-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);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-hero-link:hover, .duet-hero-link:hover .duet-hero-action-arrow {
   color: rgb(0, 77, 128) !important;

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

@@ -116,7 +116,10 @@ duet-caption:not(:last-of-type) {
 }
 .duet-input-container.has-clear .duet-input-clear-icon 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-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-input-container.has-clear .duet-input-clear-icon button:active {
   opacity: 0.75;
@@ -141,9 +144,6 @@ duet-caption:not(:last-of-type) {
 .duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button {
   color: rgb(0, 41, 77);
 }
-.duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 
 .duet-input-label-container {
   display: flex;
@@ -255,7 +255,7 @@ duet-caption:not(:last-of-type) {
 }
 .duet-input[disabled] {
   color: rgb(0, 41, 77) !important;
-  cursor: text !important;
+  cursor: not-allowed !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
   box-shadow: none !important;
@@ -269,35 +269,35 @@ duet-caption:not(:last-of-type) {
   -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
 .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px rgb(144, 149, 153) !important;
+  box-shadow: 0 0 0 1px #909599 !important;
 }
 .duet-theme-turva .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px rgb(116, 116, 117) !important;
+  box-shadow: 0 0 0 1px #0077b3 !important;
 }
 .has-error .duet-input: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-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-input:focus {
   border-color: rgb(0, 119, 179) !important;
   outline: 0;
-  box-shadow: 0 0 0 1px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-input:focus {
   border-color: rgb(23, 28, 58) !important;
-  box-shadow: 0 0 0 1px rgb(23, 28, 58) !important;
+  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .duet-theme-turva .duet-input:focus + .duet-input-icon {
   color: rgb(23, 28, 58);
 }
 .has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-theme-turva.has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-input:focus + .duet-input-icon {
   color: rgb(0, 119, 179);
@@ -427,21 +427,21 @@ duet-caption:not(:last-of-type) {
 }
 .duet-input-variation-revealable.has-focus .duet-input-relative {
   border-color: rgb(0, 119, 179);
-  box-shadow: 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px #0077b3 !important;
 }
 .duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative {
   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-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px rgb(144, 149, 153);
+  box-shadow: 0 0 0 1px #909599;
 }
 .duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px rgb(116, 116, 117);
+  box-shadow: 0 0 0 1px #0077b3;
 }
 .duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }

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

@@ -39,10 +39,10 @@
 }
 .duet-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-theme-turva .duet-link:focus, .duet-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);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-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";
@@ -127,6 +127,10 @@
 .block.duet-link.none {
   padding: 0;
 }
+.block .block__content {
+  position: relative;
+  bottom: 2px;
+}
 .block .block__chevron-icon {
   transition: 300ms ease;
 }