@duetds/components 10.2.4 → 10.3.1

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

@@ -157,9 +157,6 @@
   font-weight: 400;
   line-height: 1.25;
 }
-.duet-theme-turva .duet-multiselect-wrapper {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
 
 .duet-multiselect {
   display: flex;
@@ -182,62 +179,51 @@
   background: rgb(255, 255, 255);
   border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
-  transition: 150ms ease;
 }
 .duet-multiselect .duet-multiselect-label {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.duet-multiselect:hover {
+.duet-multiselect:hover:not(:focus) {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
-  border-color: rgb(127, 150, 165);
 }
-.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(120, 145, 164);
+.duet-theme-turva .duet-multiselect:hover:not(:focus), .duet-multiselect:hover:not(:focus).duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
-.has-error .duet-multiselect:hover {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
+.has-error .duet-multiselect:hover:not(:focus) {
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
 }
 .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);
-  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);
+  outline-color: rgb(0, 119, 179) !important;
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-multiselect:focus, .duet-theme-turva .duet-multiselect.duet-multiselect-active {
-  border-color: rgb(23, 42, 59);
+.duet-theme-turva .duet-multiselect:focus, .duet-multiselect:focus.duet-theme-turva, .duet-theme-turva .duet-multiselect.duet-multiselect-active, .duet-multiselect.duet-multiselect-active.duet-theme-turva {
+  outline-color: rgb(23, 42, 59) !important;
 }
 .has-error .duet-multiselect:focus, .has-error .duet-multiselect.duet-multiselect-active {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
+  background: rgb(255, 255, 255) !important;
 }
 .duet-multiselect[disabled] {
-  color: rgb(8, 42, 77) !important;
-  cursor: default !important;
+  color: rgb(127, 150, 165) !important;
+  cursor: not-allowed !important;
   outline: none !important;
   background: rgb(245, 248, 250) !important;
-  border-color: rgb(245, 248, 250) !important;
+  border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
-.duet-theme-turva .duet-multiselect[disabled] {
-  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;
-}
 .duet-multiselect > :first-child {
   flex: 1;
   min-height: 24px;
@@ -252,41 +238,23 @@
   background: #d9ebf4;
   border-radius: 20rem;
 }
-.duet-theme-turva .duet-multiselect .duet-multiselect-badge {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-weight: 700;
-  color: rgb(23, 42, 59);
-  background: #e8eaeb;
-}
 .duet-multiselect .duet-multiselect-icon {
   margin-left: 12px;
 }
 .has-error .duet-multiselect {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
   border-color: rgb(214, 28, 82) !important;
 }
 .has-error .duet-multiselect .duet-multiselect-icon {
   color: rgb(214, 28, 82) !important;
 }
-.duet-theme-turva.has-error .duet-multiselect {
-  border-color: rgb(214, 28, 82) !important;
-}
-.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon {
-  color: rgb(214, 28, 82) !important;
-}
-.duet-theme-turva .duet-multiselect {
-  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, 42, 59);
-  border-color: rgb(120, 145, 164);
-}
 .duet-multiselect svg {
   width: 20px;
   height: 20px;
   color: rgb(8, 42, 77);
   pointer-events: none;
 }
-.duet-theme-turva .duet-multiselect svg {
-  color: rgb(23, 42, 59);
-}
 .duet-multiselect svg.duet-multiselect-icon--rotate {
   transform: rotate(180deg);
 }
@@ -307,11 +275,6 @@
   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);
-  border-color: rgb(212, 221, 226);
-  box-shadow: 0 4px 10px 0 rgba(23, 28, 58, 0.15);
-}
 .duet-multiselect-checkboxes.duet-multiselect-checkboxes-active {
   visibility: visible;
   opacity: 1;
@@ -339,7 +302,7 @@
   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, .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 {
+.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 {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -347,13 +310,6 @@
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child {
   border-right: 1px solid rgb(212, 223, 229);
 }
-.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons 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(230, 23, 64);
-}
-.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
-  color: rgb(23, 42, 59);
-}
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
   color: rgb(8, 42, 77);
 }
@@ -383,10 +339,6 @@
   display: block;
   margin-top: 8px;
 }
-.duet-theme-turva .duet-multiselect-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(120, 145, 164);
-}
 .has-error .duet-multiselect-help {
   color: rgb(214, 28, 82);
 }
@@ -405,32 +357,42 @@
   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: rgb(23, 42, 59);
-}
-:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect[disabled] {
-  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;
+.duet-theme-turva .duet-multiselect-wrapper {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect {
+.duet-theme-turva .duet-multiselect {
+  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, 42, 59);
+  border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect svg {
+.duet-theme-turva .duet-multiselect svg {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect .duet-multiselect-badge {
+.duet-theme-turva .duet-multiselect .duet-multiselect-badge {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: 700;
   color: rgb(23, 42, 59);
   background: #e8eaeb;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes {
+.duet-theme-turva .duet-multiselect-checkboxes {
+  background: rgb(255, 255, 255);
   border-color: rgb(212, 221, 226);
+  box-shadow: 0 4px 10px 0 rgba(23, 28, 58, 0.15);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
+.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon {
+  color: rgb(214, 28, 82) !important;
+}
+.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons 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(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
+.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
   color: rgb(23, 42, 59);
+}
+.duet-theme-turva .duet-multiselect-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(120, 145, 164);
+}
+.duet-theme-turva.has-error .duet-multiselect-help {
+  color: rgb(214, 28, 82);
 }

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

@@ -273,23 +273,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '97536f27fe14e8f81df263d98c9f053b698d8ddc', class: {
+        return (h(Host, { key: '745ae2dcace9c47a7ef0d12543fdeef0466cda02', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '36b9eee52abd2ee6b61c75ed2ec841a0c93630f8', class: {
+            } }, h("div", { key: '392e8386b1ae4453c31049f6933621f02c0438ae', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '7a87af1d95f8aa21659cc54059eeee7a71381b9f', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'd584d8069843723e09395b74acc855b8f1a03d3d', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '5e51e4a0911761a464051ead529bdec483ed718c', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'c49215d1d23717e096993ed92626ec74b08a30a7', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'fa1f2d08b30643f1eb4ef6ad82b2b43b38893023', class: "duet-multiselect-wrapper" }, h("button", { key: 'b3d1612d062847708718739c436922ebbeb0bbc5', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '0c69dbe9cabc1d5ceefacd2d39ebc2d367275e7b', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '6e6ec0afeae4d364fabf1d7e53405c16977345c1', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '9c800e36b854577c56b995aae33579d483d382cb' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '118e5e9a7038bc274546f8d1e15074228b1bfa51', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3cdacabfaf82bb73eb9ae10d5266d6db8670b8f0', 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("div", { key: '8b2cc52242d9b5c8171dc0b243431e85e12388c4', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: 'db2bbe8e401ee1481fcb23a51a11579ed2e9731a', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '52abf8dc3ff55b51c1ae16184bcc9dc50702129c', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '55be043c566987567c55c3d2314b2d07c0577f39', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'a265ab223cdd9967ed589daec9141580a4ff3f84', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'cb0357b1b09b6910f52d620361c0460ab15a49ab', class: "duet-multiselect-wrapper" }, h("button", { key: 'e13a3b63a5bbae2b4a4e6c950819f2352c842bf4', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'a44743618e01129e8ff089fd33468777a1094f4a', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '965fa8a9e214acc2a36ddfbe18cfc0b01f545c46', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '184f27527b7434414311eb106a448002013c5a45' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '180cc865574bb3d05cbeb09ff297789f699a4a4f', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'be284edc78d0f0a72af1c1e13a99743ade09491a', 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("div", { key: 'bd304ff02f89a093e0ec88c25543e96ae9895296', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '32afbde85cb3c09d2b1a83a4ce101eda57e10550', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'e249aa14b04681492b8d07a20b2bd527d9f5b43f', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '59b87660ba34d771407a4858406d56b296638d8f', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: 'c19292136aa2a2b0e9cfaeee91be6feed9b1fad5', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '30e71bff9bfce27f52025c9937f5346cd21d1a09', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '54e2bbd5a20208fe357972a728e46c25b19d571b', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: 'bce4068b2c0e9947a80c89a371b7c1d731c03e59', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '04505dc5e9d7558c05b5a7fb31641a30011d6520' }, this.error)))));
+            })))))), h("span", { key: '321e1473d7c585419fb4e92e6d68817b0e369bb7', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '74ceeb2d368b87d7abc142ef277c7f3462c0dc50' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7e22b4d7023564579ca7e937ea9b3e1c41383217' }, h("div", { key: 'cbd604f24c3d48b16771529aaf84590fbe2c349e', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6d354508134cf4f829922e1d12b9163ed8796753' }), h("slot", { key: '2cde080603a8252ec4015dedd7166b3d3c59b945', name: "mobile" }), h("slot", { key: '9654b2dfc61dbbb9833a8b5df624bdb92adadc15', name: "desktop" }))));
+        return (h(Host, { key: 'fff23e9c9f994ed80cebebdf7bb16d05a0b13281' }, h("div", { key: 'bf9f4a0d164a27073a8f3be2fc14e7f14f39e479', class: { container: true, sticky: this.sticky } }, h("slot", { key: '4fa7cc506db4c4b6fa9ff5219ba7b7e56107a8da' }), h("slot", { key: 'e9e8c0e724f76feb3aa320207f5a3ef7a7ab5ac9', name: "mobile" }), h("slot", { key: '49e37c33533e3ba9c733660c0420d85a3a63e80f', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,23 +44,13 @@
   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, 42, 59);
-  border-bottom-color: rgb(212, 221, 226);
-}
 .duet-notification.duet-notification-highlight {
   font-weight: 600;
 }
-.duet-notification.duet-notification-highlight.duet-theme-turva {
-  background: rgb(245, 246, 247);
-}
 @media (min-width: 62em) {
   .duet-notification:hover {
     background: rgb(240, 247, 250);
   }
-  .duet-notification:hover.duet-theme-turva {
-    background: rgb(245, 246, 247);
-  }
 }
 .duet-notification a {
   text-decoration: none;
@@ -74,7 +64,7 @@
   outline-color: rgba(0, 119, 179, 0.8);
   z-index: 1;
 }
-.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 {
+.duet-theme-turva :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
@@ -114,9 +104,6 @@
     width: auto;
   }
 }
-.duet-theme-turva .duet-notification-date {
-  color: rgb(95, 122, 143);
-}
 
 @media (min-width: 62em) {
   :host(:not([highlight])) ::slotted(duet-heading),
@@ -147,18 +134,24 @@
   margin-bottom: 2px !important;
 }
 
-:host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
+.duet-notification.duet-theme-turva {
   color: rgb(23, 42, 59);
   border-bottom-color: rgb(251, 225, 209);
 }
-:host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
+
+.duet-notification.duet-notification-highlight.duet-theme-turva {
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
+
+.duet-notification-badge.duet-theme-turva {
   background: rgb(230, 23, 64);
 }
+
 @media (min-width: 62em) {
-  :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
+  .duet-notification:hover.duet-theme-turva {
     background: rgb(251, 235, 225);
   }
+}
+.duet-theme-turva .duet-notification-date {
+  color: rgb(95, 122, 143);
 }

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

@@ -79,11 +79,11 @@ export class DuetNotification {
         return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
     }
     render() {
-        return (h("div", { key: '0c265034a28ae5591df26cf2603ab3d045b45478', role: "listitem", class: {
+        return (h("div", { key: '7dc46b88a1d5fb69c339262f5ef2cf5a8017b886', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '8f26b04ba38b69dcb86b0ab8b6820ad63453c831', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'e573dfed62263051b2841cb36cfe1b3c00db8e50', class: "duet-notification-container" }, h("div", { key: '0e4d1b7fec55b7c69043f3beebefff071f2d1e04', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'e9086498a4ef7534f5a68956dad0a811486b41b1', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'd02944064c8c7842fb5556f2eadef2fc11aad3bd', class: "duet-notification-content" }, h("slot", { key: 'f4de0aed88ff1f2545d2d630c299fa7e73e62a67' })), h("div", { key: '8486cd8ac2797612ceae89c720b184c3e2f52805', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'a75c52e0336ffbf56b1c852fe67f315816f75559', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'e0b83c432a0ff4c12f63516e0418596671270f52', class: "duet-notification-container" }, h("div", { key: '20e4d22bd11670b325e3130e255bf0596d2a43b0', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '34975b80502bf22b225e78231721a6d800c1c5ee', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '326cc9425c9bf45adc67c51174773105414a5f3e', class: "duet-notification-content" }, h("slot", { key: 'c1f7f01a44a74f55bc2642e368095af65cce28db' })), h("div", { key: '3b5b190da2388e94e91a43490ff816a406c2fb66', 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

@@ -66,7 +66,7 @@
   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 {
+.duet-theme-turva :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
@@ -83,21 +83,12 @@
     transition: border 300ms ease;
   }
 }
-.duet-theme-turva .duet-drawer-toggle {
-  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, 42, 59);
-  background-color: rgb(255, 255, 255);
-  border-color: rgb(212, 221, 226);
-}
 .duet-drawer-toggle:active {
   opacity: 0.75;
 }
 .duet-drawer-toggle:hover {
   color: rgb(0, 75, 129);
 }
-.duet-theme-turva .duet-drawer-toggle:hover {
-  color: rgb(95, 122, 143);
-}
 .duet-drawer-toggle::after {
   display: none !important;
 }
@@ -115,19 +106,12 @@
     transform: translateY(3px);
     transition: 300ms ease;
   }
-  .duet-theme-turva .duet-drawer-toggle::after {
-    background: rgb(230, 23, 64);
-  }
 }
 .duet-drawer-toggle[aria-expanded=true], .duet-drawer-toggle[aria-expanded=true]:hover {
   color: rgb(0, 75, 129);
   border-bottom: 1px solid rgb(245, 248, 250);
   border-radius: 0;
 }
-.duet-theme-turva .duet-drawer-toggle[aria-expanded=true], .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
-  color: rgb(95, 122, 143);
-  border-color: rgb(245, 246, 247);
-}
 @media (min-width: 62em) {
   .duet-drawer-toggle[aria-expanded=true], .duet-drawer-toggle[aria-expanded=true]:hover {
     border: 0;
@@ -194,10 +178,6 @@
 .duet-drawer-content:focus {
   outline: 0;
 }
-.duet-theme-turva .duet-drawer-content {
-  background-color: rgb(255, 255, 255);
-  border-color: rgb(212, 223, 229);
-}
 @media (min-width: 62em) {
   .duet-drawer-content {
     --notification-border-top-radius: 0;
@@ -222,9 +202,6 @@
     transform-origin: 50% 0;
     transition: 300ms ease;
   }
-  .duet-theme-turva .duet-drawer-content {
-    background-color: rgb(255, 255, 255);
-  }
   .duet-drawer-content.duet-drawer-left {
     right: 0;
   }
@@ -243,15 +220,34 @@
   }
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
+.duet-theme-turva .duet-drawer-toggle {
+  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, 42, 59);
+  background-color: rgb(255, 255, 255);
   border-color: rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
-  background: rgb(230, 23, 64);
+.duet-theme-turva .duet-drawer-toggle:hover {
+  color: rgb(95, 122, 143);
+}
+
+@media (min-width: 62em) {
+  .duet-theme-turva .duet-drawer-toggle::after {
+    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 {
+
+.duet-theme-turva .duet-drawer-toggle[aria-expanded=true],
+.duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
   color: rgb(140, 0, 30);
   border-color: rgb(245, 246, 247);
+}
+
+.duet-theme-turva .duet-drawer-content {
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(212, 223, 229);
+}
+@media (min-width: 62em) {
+  .duet-theme-turva .duet-drawer-content {
+    background-color: rgb(255, 255, 255);
+  }
 }

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

@@ -126,13 +126,13 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '0bba8232dd1ab609418b4de64933e3412c0c5c34', class: {
+        return (h("div", { key: '9f4089715c79f3098cbddd19ecb0fe9f625e60dc', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '4b962dc86ccbf2964df8500071dbc18f02c963cd', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '5fe36e672d516fc490643ee5c5141111ea68188d', 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: '2f15bb497d2434af19730f4030d2745f91e02578', class: "duet-drawer-icon" }, h("duet-icon", { key: '483eb19eec9f4540d16229e443d3db9996f184b6', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '69984a9e0d645cd642b80e0fb2c447c700c98649', variation: "change" }))), h("span", { key: '25f5d0416062bf12f288db0f3727e1b44b519133', class: "duet-drawer-label" }, this.label), h("div", { key: '0ce588f8ecba4ba197f2991b205ea869aa86b139', class: "duet-drawer-caret" }, h("duet-icon", { key: '26570a5e3a4b5bea09023b00801ead20e71eca9a', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '07b8e4be45d32367caf6c3c430e54117fc3d334b', id: "duet-drawer-content", class: {
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '69aede6500156038fe894b681c4a06be6761a9a2', class: "duet-drawer-icon" }, h("duet-icon", { key: '1b9cdf160b899552f2ef1db63a1abd2d2cc7da0a', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '76fdbf1f66da5ce3516dcc73b198463776b82934', variation: "change" }))), h("span", { key: '45ca00e1fb494cea8fd4f275c511ba9b15b16891', class: "duet-drawer-label" }, this.label), h("div", { key: 'e069a59c71d16a47da7bd6b73266b9b919e8048c', class: "duet-drawer-caret" }, h("duet-icon", { key: '4a43d6c80a971e1ed468384a9a2b3e52a49177b4', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '94fa21716202a038ed322b705b4acff582c6cb00', 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

@@ -92,7 +92,7 @@
   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 {
+.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 {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-number-buttons .duet-number-button[aria-disabled=true], .duet-number-buttons .duet-number-button:disabled {
@@ -139,11 +139,4 @@
 }
 :host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before {
   background: rgb(212, 221, 226);
-}
-
-:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:first-of-type::before {
-  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: rgb(212, 221, 226);
 }

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

@@ -393,15 +393,15 @@ export class DuetNumberInput {
         const identifier = this.identifier || this.inputId;
         const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: '275a1396fb2d9fa28f6657eaeea0a80bfa4f467a', class: {
+        return (h(Host, { key: '2f0bce422783a7da27a9750a185bd55e5845528b', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: 'fb2d8070dbc28ae7fe8caf12d9240f46de8c9ce7', class: "duet-number-container" }, h("duet-input", { key: '123545288214638cc732524a308a29192725c77b', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '4f686a5c2f574d074a2d6454cd194365fcc141c2', name: "tooltip" }), h("div", { key: 'e03343cbb7974041658891a01b3f77c2c4c4aee4', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'c8a6882f049ba90c4d020135a5db41599c13c41a', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: '07016fbd4972e51d5aab8f7c040a70f743b3037a' }, this.accessibleSubtract
+            } }, h("div", { key: '7c89eb8dfc7a08b0bdf2c83acbb0fafb80626b9d', class: "duet-number-container" }, h("duet-input", { key: 'b105894b4934b2fcbc87df94ac2d47556809f4e6', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '7e215203a35180b356101f9fd7ff7d4a31915194', name: "tooltip" }), h("div", { key: 'e37e08e25c08f8e8103b1c837e2a28dc50030ff3', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'a31ef07fda57ddd4732b228fa535a2236cd32c67', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: '9212db5abcfa94ffdd16ffd0e71ec775dc8f7471' }, this.accessibleSubtract
             .replace(/\{\s*step\s*\}/, `${this.step}`)
-            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: 'ee01a937a49a5ad232edc351b7e359c8e286c227', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '2ae1c68852bec5ab32034dae516f44b7498f993f', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '76a559a4115dc80ec7e7a12f1a0010a3e0d7eb45' }, this.accessibleAdd
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: 'ba380fee34a9923858cb8c4ed7cebb1e7155b69e', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: 'd168f42728f6841303e7a3663fb9ee54fa8c13c4', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '07a4f0464663edb651840f2f3ad716f2064404e2' }, this.accessibleAdd
             .replace(/\{\s*step\s*\}/, `${this.step}`)
-            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: '363ca09492b9399246e03b1593bc0b2d7d565ad4', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: 'e60677c28057dab13354deb353c4f147bc6a506f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: '6e2a4ccac6b0be2c3f4d6da7b8c9dada5ca78701', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '03970396f2bc5e1acc1fafaa6e63ba2550cd2f8d', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,9 +9,6 @@
   background: rgb(8, 42, 77);
   opacity: 0.3;
 }
-.duet-overlay.duet-theme-turva {
-  background: rgb(23, 42, 59);
-}
 .duet-overlay.keep-stacking-context {
   position: absolute;
   top: unset;
@@ -32,9 +29,6 @@
   background: rgb(255, 255, 255);
   opacity: 0.9;
 }
-.duet-overlay.white.duet-theme-turva {
-  background: rgb(255, 255, 255);
-}
 .duet-overlay.display-x-small {
   display: none;
 }
@@ -106,6 +100,9 @@
   transition: 300ms ease;
 }
 
-:host(.duet-theme-turva2) .duet-overlay.duet-theme-turva {
+.duet-overlay.duet-theme-turva {
   background: rgb(23, 42, 59);
+}
+.duet-overlay.duet-theme-turva.white {
+  background: rgb(255, 255, 255);
 }

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

@@ -59,7 +59,7 @@ export class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5e9b9a675265c9da85edc378332cda2dbe9a2776', "aria-hidden": "true" }, h("div", { key: 'ffe1b586a6912270360eab46b3c8226306ba24e2', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: '0a1b75439ac03c39c17153b13ea97858f68b6045', "aria-hidden": "true" }, h("div", { key: '4690d5c28e640e90125ceb6280adbefb19c01301', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,