@duetds/components 9.2.0 → 9.2.2

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

@@ -55,7 +55,7 @@ duet-table.duet-theme-turva table {
 duet-table td {
   -webkit-hyphens: auto;
   hyphens: auto;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 duet-table.duet-theme-turva td {
   color: rgb(23, 28, 58);
@@ -63,15 +63,15 @@ duet-table.duet-theme-turva td {
 duet-table th {
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   text-align: left;
 }
 duet-table.duet-theme-turva th {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 duet-table tbody th {
   font-weight: 600;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 duet-table.duet-theme-turva tbody th {
   color: rgb(23, 28, 58);
@@ -115,7 +115,7 @@ duet-table span.duet-table-cell-heading {
   display: block;
   font-size: 1rem;
   font-weight: 600;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-table-flattened.duet-theme-turva td span.duet-table-cell-heading {
   color: rgb(23, 28, 58);
@@ -129,7 +129,7 @@ duet-table span.duet-table-cell-heading {
 .duet-table-flattened tbody th {
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   text-align: left;
 }
 
@@ -153,31 +153,31 @@ duet-table span.duet-table-cell-heading {
   background: rgb(255, 255, 255);
 }
 .duet-table-striped.duet-table-sticky thead th {
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-table-striped.duet-table-sticky.duet-theme-turva thead th {
-  border-bottom-color: rgb(228, 228, 230);
+  border-bottom-color: rgb(222, 224, 228);
 }
 .duet-table-striped tbody:not(:first-of-type) th {
   padding-top: 40px !important;
 }
 .duet-table-striped tbody:only-of-type tr:nth-of-type(odd) {
-  background: rgba(0, 80, 128, 0.04);
+  background: rgba(4, 81, 128, 0.04);
 }
 .duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
   background: rgba(23, 28, 58, 0.04);
 }
 .duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even) {
-  background: rgba(0, 80, 128, 0.04);
+  background: rgba(4, 81, 128, 0.04);
 }
 .duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
   background: rgba(23, 28, 58, 0.04);
 }
 .duet-table-striped tfoot td {
-  border-top: 1px solid rgb(225, 227, 230);
+  border-top: 1px solid rgb(212, 223, 229);
 }
 .duet-table-striped.duet-theme-turva tfoot td {
-  border-top-color: rgb(228, 228, 230);
+  border-top-color: rgb(222, 224, 228);
 }
 .duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th {
   padding-top: 20px !important;
@@ -189,15 +189,15 @@ duet-table span.duet-table-cell-heading {
   border-top: 0;
 }
 .duet-table-striped.duet-table-flattened tfoot tr {
-  border-top: 1px solid rgb(225, 227, 230);
+  border-top: 1px solid rgb(212, 223, 229);
 }
 .duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
-  border-top-color: rgb(228, 228, 230);
+  border-top-color: rgb(222, 224, 228);
 }
 
 .duet-table-fixed th, .duet-table-minimal th, .duet-table-plain th {
   padding: 16px !important;
-  border-bottom: 1px solid rgb(101, 119, 135);
+  border-bottom: 1px solid rgb(98, 121, 138);
 }
 .duet-table-fixed th:first-child, .duet-table-minimal th:first-child, .duet-table-plain th:first-child {
   padding-left: 0 !important;
@@ -206,14 +206,14 @@ duet-table span.duet-table-cell-heading {
   padding-right: 0 !important;
 }
 .duet-theme-turva.duet-table-fixed th, .duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
-  border-bottom-color: rgb(68, 68, 69);
+  border-bottom-color: rgb(113, 118, 132);
 }
 .duet-table-fixed tbody th, .duet-table-minimal tbody th, .duet-table-plain tbody th {
   padding-top: 40px !important;
-  border-bottom-color: rgb(225, 227, 230);
+  border-bottom-color: rgb(212, 223, 229);
 }
 .duet-theme-turva.duet-table-fixed tbody th, .duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
-  border-bottom-color: rgb(228, 228, 230);
+  border-bottom-color: rgb(222, 224, 228);
 }
 .duet-table-fixed td, .duet-table-minimal td, .duet-table-plain td {
   padding: 16px !important;
@@ -225,10 +225,10 @@ duet-table span.duet-table-cell-heading {
   padding-right: 0 !important;
 }
 .duet-table-fixed tbody td, .duet-table-minimal tbody td, .duet-table-plain tbody td {
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-theme-turva.duet-table-fixed tbody td, .duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
-  border-bottom-color: rgb(228, 228, 230);
+  border-bottom-color: rgb(222, 224, 228);
 }
 .duet-table-flattened.duet-table-fixed tbody:first-of-type th, .duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
   padding-top: 0 !important;
@@ -253,10 +253,10 @@ duet-table span.duet-table-cell-heading {
 }
 
 .duet-table-plain.duet-table-flattened tbody tr {
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
-  border-bottom-color: rgb(228, 228, 230);
+  border-bottom-color: rgb(222, 224, 228);
 }
 
 .duet-table-minimal tbody tr,
@@ -266,7 +266,7 @@ duet-table span.duet-table-cell-heading {
 }
 .duet-table-minimal tbody tr:last-of-type,
 .duet-table-minimal tbody tr:last-of-type td {
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-table-minimal.duet-table-flattened tbody tr,
 .duet-table-minimal.duet-table-flattened tbody tr td {
@@ -276,10 +276,10 @@ duet-table span.duet-table-cell-heading {
   display: none;
 }
 .duet-table-minimal.duet-table-flattened tfoot {
-  border-top: 1px solid rgb(225, 227, 230);
+  border-top: 1px solid rgb(212, 223, 229);
 }
 .duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
-  border-top-color: rgb(228, 228, 230);
+  border-top-color: rgb(222, 224, 228);
 }
 
 .duet-table-fixed table {
@@ -300,10 +300,10 @@ duet-table span.duet-table-cell-heading {
   border-bottom: 0 none;
 }
 .duet-table-fixed:not(.duet-table-flattened) tfoot {
-  border-top: 1px solid rgb(225, 227, 230);
+  border-top: 1px solid rgb(212, 223, 229);
 }
 .duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot {
-  border-top-color: rgb(228, 228, 230);
+  border-top-color: rgb(222, 224, 228);
 }
 
 .duet-table-scrollable {
@@ -320,7 +320,7 @@ duet-table span.duet-table-cell-heading {
   background: rgba(0, 119, 179, 0.08);
 }
 .duet-theme-turva .duet-table-selected-column {
-  background: rgba(68, 68, 69, 0.08);
+  background: rgba(113, 118, 132, 0.08);
 }
 
 .duet-table-sortable tbody tr td:first-child,
@@ -328,10 +328,10 @@ duet-table span.duet-table-cell-heading {
   padding: 20px;
 }
 .duet-table-sortable:not(.duet-table-flattened) tfoot {
-  border-top: 1px solid rgb(225, 227, 230);
+  border-top: 1px solid rgb(212, 223, 229);
 }
 .duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot {
-  border-top-color: rgb(228, 228, 230);
+  border-top-color: rgb(222, 224, 228);
 }
 
 .duet-table-actions table {

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

@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'b3ed604b2b5f0b8e31f7b90abc64693662bfef3d', class: {
+        return (h(Host, { key: '40ae11c117aa9e3d098fca4386bd82bf50c09d0a', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,7 +122,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '29df6d3c640fbf3a7fa51b73323c3628246d3095' })));
+            } }, h("slot", { key: 'c087d7df4a628c929262797c6b84fc33b701b8d2' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -102,76 +102,76 @@ duet-tooltip,
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   resize: vertical;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   transition: 150ms ease;
 }
 .duet-theme-turva .duet-textarea {
   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);
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .has-error .duet-textarea {
-  border-color: rgb(222, 35, 98) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-textarea {
-  border-color: rgb(224, 42, 13) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .duet-textarea::-webkit-input-placeholder {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   opacity: 1 !important;
   transition: color 300ms ease;
 }
 .duet-theme-turva .duet-textarea::-webkit-input-placeholder {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(207, 210, 212);
+  color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(207, 207, 209);
+  color: rgb(199, 202, 207);
 }
 .duet-textarea::-moz-placeholder {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   opacity: 1 !important;
 }
 .duet-theme-turva .duet-textarea::-moz-placeholder {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-textarea:focus::-moz-placeholder {
-  color: rgb(207, 210, 212);
+  color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-textarea:focus::-moz-placeholder {
-  color: rgb(207, 207, 209);
+  color: rgb(199, 202, 207);
 }
 .duet-textarea:-ms-input-placeholder {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
 }
 .duet-theme-turva .duet-textarea:-ms-input-placeholder {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-textarea:focus:-ms-input-placeholder {
-  color: rgb(207, 210, 212);
+  color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
-  color: rgb(207, 207, 209);
+  color: rgb(199, 202, 207);
 }
 .duet-textarea[disabled] {
-  color: rgb(101, 119, 135) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: not-allowed !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
 }
 .duet-theme-turva .duet-textarea[disabled] {
-  color: rgb(116, 116, 117) !important;
-  background: rgb(245, 245, 247) !important;
-  border-color: rgb(245, 245, 247) !important;
+  color: rgb(143, 147, 158) !important;
+  background: rgb(245, 247, 250) !important;
+  border-color: rgb(245, 247, 250) !important;
 }
 .duet-textarea[disabled]::-webkit-input-placeholder {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   opacity: 1 !important;
   transition: color 300ms ease;
 }
@@ -179,14 +179,14 @@ duet-tooltip,
   color: rgb(23, 28, 58);
 }
 .duet-textarea[disabled]::-moz-placeholder {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 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);
+  color: rgb(8, 42, 77);
 }
 .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
   color: rgb(23, 28, 58);
@@ -234,13 +234,13 @@ duet-tooltip,
 }
 .duet-theme-turva .duet-textarea-help {
   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(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .has-error .duet-textarea-help {
-  color: rgb(222, 35, 98);
+  color: rgb(214, 28, 82);
 }
 .duet-theme-turva.has-error .duet-textarea-help {
-  color: rgb(224, 42, 13);
+  color: rgb(214, 28, 82);
 }
 
 .duet-label-hidden duet-label {

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host, } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
@@ -162,23 +162,26 @@ export class DuetTextarea {
      * Always the last one in the class.
      */
     render() {
+        if (Build.isServer) {
+            return;
+        }
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: 'c3b31db31b22c40183466910b4762d2476cd3b4b', class: {
+        return (h(Host, { class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'fb7b1f655a8d8519ad38cf110ef4d0aac5e0dbd5', class: {
+            } }, h("div", { class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { key: 'ca8b81cd836c5b413d7ef2efd8d0e20d88677709', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '509fbb9ca662d38fa8f3d66013459141592c04bd', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'e90c6afcf38a563122b32c71d2b8a74c9df980dc', name: "tooltip" }), this.caption && (h("duet-caption", { key: '9bb362d665f0cf1898ebf380b4989d3f65f14371', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '601f1bea634594d73b983373107c175a76c1100a', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'e9a43999996749d5d172eacfaa42597ba5dbb7fe', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '505944e9722ecc367ee4f395132c39b367af7a31', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '2a9345c695c8f798c88444446c7fe3a4d6073b3f', alignment: "stretch" }, h("duet-grid-item", { key: '603a4279b24566e2bf0f52bbc6f5106a92f1fccf', margin: "none", fill: true }, h("div", { key: 'c7dc521f37c36b761ed4fc78150efe59c1fb98fb', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '11f69f46dc6822dc9942f64056310c8eac7a2861' }, this.error))), h("duet-grid-item", { key: 'b7dcc318f6911b52a959c2162980272260419b1d', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: '590c05e0b251e46af19c479733281a0b8b7a2fa1', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: 'c279b238edfcc355fb7243bed0afa94b544661e8', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }
     static get is() { return "duet-textarea"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-textarea.scss"]

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

@@ -97,14 +97,14 @@ duet-label {
   box-shadow: none;
 }
 .duet-switch input:disabled:not(:checked) + .duet-slider {
-  background: #c8cacc;
+  background: #bfcbd2;
 }
 .duet-switch input:disabled:not(:checked) + .duet-slider::before {
   background: rgb(255, 255, 255);
   box-shadow: none;
 }
 .duet-theme-turva .duet-switch input:disabled:not(:checked) + .duet-slider {
-  background: #bababa;
+  background: #c7c9cf;
 }
 .duet-theme-turva .duet-switch input:disabled:not(:checked) + .duet-slider::before {
   background: rgb(255, 255, 255);
@@ -129,7 +129,7 @@ duet-label {
   bottom: 0;
   left: 0;
   cursor: pointer;
-  background-color: rgb(144, 149, 153);
+  background-color: rgb(127, 150, 165);
   border-radius: 24px;
   transition: background-color 300ms ease;
 }
@@ -146,7 +146,7 @@ duet-label {
   transition: 300ms ease;
 }
 .duet-theme-turva .duet-slider {
-  background-color: rgb(116, 116, 117);
+  background-color: rgb(143, 147, 158);
 }
 .duet-theme-turva .duet-slider::before {
   background-color: rgb(255, 255, 255);

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

@@ -40,7 +40,7 @@
   max-width: 1384px;
   height: 36px;
   margin: 0 28px;
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-toolbar .list {
   display: flex;
@@ -71,7 +71,7 @@
   background: rgb(255, 255, 255);
 }
 .duet-toolbar.duet-theme-turva .container {
-  border-bottom: 1px solid rgb(228, 228, 230);
+  border-bottom: 1px solid rgb(222, 224, 228);
 }
 .duet-toolbar.duet-theme-turva.primary {
   background: rgb(198, 12, 48);

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '6ea0ca6e03a956c5c11e6b6b67802a8344e6f3d8' }, h("nav", { key: '8937fd46b558b273ee838a47b14b9810c074829d', class: {
+        return (h(Host, { key: 'f755504caccff50555f478c9de6cf384e624cb3b' }, h("nav", { key: '1e261ae52e6c364e3ed7f3bb524f37da5a4f276e', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c8aa7075e8ab33484f13a8ef7ac8b2127b30ffe2', class: "container" }, h("div", { key: '76d2daf0e82846945f3510cbc21fc26e8d29936c', class: "list", role: "list" }, h("slot", { key: '12bced2c765270ea94a844b9c68d993e9d43f245', name: "left" })), h("div", { key: 'fed6a6058becea2b85d0131488e212967ee9530f', class: "list", role: "list" }, h("slot", { key: 'e51cf22766660164cbd150a6203d8e55929dd40c', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '50bfcdb065a530ced06715d880523406eaa58218', class: "container" }, h("div", { key: 'a1cf4a216b6305cd40bf86c17344b756d297b7a4', class: "list", role: "list" }, h("slot", { key: 'a0ca3b6d619470916a39fc71bc8fa9e9dbd931fe', name: "left" })), h("div", { key: '9b6649d061d2815641f8270d02f92fbad4680c4e', class: "list", role: "list" }, h("slot", { key: '2925618229a35ae1c92c2cf712449dde5e43c73a', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -51,8 +51,8 @@
   justify-content: center;
 }
 .duet-toolbar-dropdown button:hover {
-  color: rgb(0, 41, 77);
-  background: rgb(243, 249, 252);
+  color: rgb(8, 42, 77);
+  background: rgb(240, 247, 250);
 }
 .duet-toolbar-dropdown button.open .caret {
   transform: rotate(180deg);
@@ -62,7 +62,7 @@
   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);
+  color: rgb(8, 42, 77);
 }
 .duet-toolbar-dropdown button.active::after, .duet-toolbar-dropdown button.open::after {
   position: absolute;
@@ -89,7 +89,7 @@
   justify-content: center;
   min-width: 175px;
   padding: 8px;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
   border-radius: 8px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
@@ -107,7 +107,7 @@
 }
 .duet-toolbar-dropdown.duet-theme-turva button:hover {
   color: rgb(23, 28, 58);
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-toolbar-dropdown.duet-theme-turva button:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
@@ -126,19 +126,19 @@
 }
 .duet-toolbar-dropdown.negative button:hover {
   color: rgb(255, 255, 255);
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-dropdown.negative button.active {
   font-weight: 600;
   color: rgb(255, 255, 255);
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-dropdown.negative button.open {
   color: rgb(255, 255, 255);
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-dropdown.negative button duet-icon {
-  color: rgb(205, 229, 241);
+  color: rgb(198, 225, 238);
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button {
   color: rgb(255, 255, 255);
@@ -157,5 +157,5 @@
   background: rgba(23, 28, 58, 0.2);
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
-  color: rgb(244, 207, 214);
+  color: rgb(255, 185, 190);
 }

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

@@ -50,18 +50,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '71c0427eecb0676263c35bff4557210701d27e6f', role: "listitem" }, h("div", { key: 'a5038335629483dcf2d049129ebfed49eae6a457', class: {
+        return (h(Host, { key: 'd43fd569731d6dc4a0bb5244105d0dd14ed7bc88', role: "listitem" }, h("div", { key: '5ca1536d28a1eac21dcbe812503fffbf872c86a2', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '5be6ce290e94c6e03c8c49336f4ef50e4283a92a', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: '2efdeb725e1699d458e1fe38973700bce864b002', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'e4e5076e21a084d205cb550946f6a7914911a4e9', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '4a79cbc7d59d30c5f763050c44c61c03ae502e74', class: "label" }, h("slot", { key: 'adecb2560eba25c9bdb1872fedc29c6b98c4d343', name: "label" }), h("duet-icon", { key: 'ef92b887f19bd4145ae89b3d6ab05be6c3b2fcd0', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '61bb1eff472548331aab26b636fb4606fbc982f7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b717e79696bdb53c18e48144620f6dd705512c92', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '702072ed8713a9be42822e7965844d7ac6e5119e', class: "label" }, h("slot", { key: 'e821052ac4c40880b7ed145ea270efc790b33156', name: "label" }), h("duet-icon", { key: 'ba6322e41b4d25e9750209b9a65fb284e517e8ce', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '702e4f974c7fbc1305c202662b5df4a3b921be78', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'bdbb39527038baf411f9f4770cf594bdb3e86378' })))));
+            } }, h("slot", { key: '71cc065f8c834a36224d881edee359b7c8c1c657' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: center;
   text-decoration: none;
 }
@@ -56,14 +56,14 @@
   color: rgb(23, 28, 58);
 }
 .duet-toolbar-dropdown-link.active {
-  background: rgb(243, 249, 252);
+  background: rgb(240, 247, 250);
 }
 .duet-toolbar-dropdown-link.active.duet-theme-turva {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-toolbar-dropdown-link:hover {
-  background: rgb(230, 242, 248);
+  background: rgb(228, 241, 247);
 }
 .duet-toolbar-dropdown-link:hover.duet-theme-turva {
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -31,11 +31,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1c874f9ed81beb0ee19f1675e95dffd0a193e2ce' }, h("a", { key: '8b04559cb61b8c25ecfd1511cc07de5a260f70bf', class: {
+        return (h(Host, { key: 'ccfbeb7db46523d362f93d465201f2822d4663a7' }, h("a", { key: '9626df46ad17d4e77ea6f67eacdfcea61f7e2737', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'c58dd6c5edc6a41fe20c73876cbe5637b9d389ba', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '93d7b57557f9999e2a790a94407e098a3b43350f', class: "label" }, h("slot", { key: '3ef98fd8e64aebc17df819a375c2e38207ccf3aa' })), this.active && (h("duet-icon", { key: 'a77c71f91778c5e70c0c23decc3ea9e23168422d', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'f7669f90d9803ec830e0173132ee626a61f8f955', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '9a31e23862c3bee1f980f3c4d14905dbe360020b', class: "label" }, h("slot", { key: '63da45ba2b705145b779d6aab4d2be28b68c509b' })), this.active && (h("duet-icon", { key: '17822abef02ddca26ee57961e735957f17691655', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }