@duetds/components 10.3.0 → 10.4.0

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

@@ -53,7 +53,7 @@
   outline-offset: -4px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-submenu-bar-item:focus, .duet-submenu-bar-item:focus.duet-theme-turva, .duet-theme-turva .duet-submenu-bar-item:focus, .duet-submenu-bar-item:focus.duet-theme-turva {
+.duet-theme-turva .duet-submenu-bar-item:focus, .duet-submenu-bar-item:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: -4px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -80,7 +80,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: '7ee97d49c78004d4ae845e940fb03e6e1ee75bd7', role: "listitem" }, h(TagName, { key: 'dcc4541376b094f3eec8ce84465cdd2c77978bf8', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '74e7c4f39e27a8c9030d02bf33f50ded7220f588', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'ab00e171bc83993c2580c25bbdfa3b77ea58ee89', class: "label" }, h("span", { key: '0cb9766ca34e699f99c1ec699ce0a7d9be8fb0ad', class: "label-text" }, h("slot", { key: '1e7f21511c1dbfb21780b7828397ddb3564c96e5' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '698c894c3987de2c8c645234e25f600ecf33d8c2', class: {
+        return (h(Host, { key: '35be20639e3574ca775aa4b697485c84a1512045', role: "listitem" }, h(TagName, { key: '10e74fbfad350fa687d2ed5c6d5bfa6c3c3b7a08', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'e4de062ea87077cdf5ab2f80a72cb746d10b32e9', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '1829e95b6db1e8970ca53e5f8332b0aa97df310a', class: "label" }, h("span", { key: '815b45070604d6a9fc3f875677119480812c448d', class: "label-text" }, h("slot", { key: '195a9798c946491c1ec6318a99b5738e92d68f58' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '8718695a96ec8294833a18791aeefbe51526308f', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -50,7 +50,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-submenu-bar-link:focus, .duet-submenu-bar-link:focus.duet-theme-turva, .duet-theme-turva .duet-submenu-bar-link:focus, .duet-submenu-bar-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-submenu-bar-link:focus, .duet-submenu-bar-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -41,7 +41,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fb8760077be9d8402a747e67fa3f5589c35b1586', role: "listitem" }, h("a", { key: '5b77c9c31a719059b2df6183dd09f0fbb174dde4', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'd47cacb2b609f6fb89d4955932aa460a13a70e0e', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '962bab30d15d749df6d2823daafba59488fc92df', class: "label" }, h("slot", { key: '57541fbb4f923bbb1fdd6efbe05cddb72f63a147' })))));
+        return (h(Host, { key: '43fe2f21e9f7ce5b2ea4a31fb4ac6f9f76b7dea7', role: "listitem" }, h("a", { key: '78ffb34f6f54b32f8c8401139b23b34a5fe9ef95', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'c42d8f5d5fe3c4b9d4dbcfe3151a1ee2c7be2ec2', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'a2e72daf94cc2c40ab025e399c949b4f8111bdea', class: "label" }, h("slot", { key: 'a5fb89a7dc0aea64b82a6be83104f8b9971066c8' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-tab:focus, :host(.user-is-tabbing) .duet-tab:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-tab:focus, :host(.user-is-tabbing) .duet-tab:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-tab:focus, :host(.user-is-tabbing) .duet-tab:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab.selected {

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

@@ -110,7 +110,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '414606a9161016ce42050bb4d736547d611db39b', ref: element => {
+        return (h("div", { key: 'a022a330a4f4eef2664a452c8f0df2b84e46c429', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -119,7 +119,7 @@ export class DuetTab {
                 "duet-tab": true,
                 selected: this.selected,
                 "has-content-id": !!this.contentId,
-            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: '743f5b9f0b1487dd9a7abbf01fb41b5bd9f0782c' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'fcb609d847cf496ada314f386a9b82dab58a7c19' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -196,7 +196,7 @@
   outline-offset: 0;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-variation-default .duet-tab-button {
@@ -239,7 +239,7 @@
   outline-offset: -5px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva, .duet-theme-turva .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva {
+.duet-theme-turva .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-variation-default .duet-tab-button.selected:focus-visible::before {
@@ -406,7 +406,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva, .duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva {
+.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -281,13 +281,13 @@ export class DuetTabGroup {
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
                 "duet-theme-turva": this.theme === "turva",
             }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
-        return (h("div", { key: '45490c3fc4912de77e292ed0ed18c7146e7606d6', class: {
+        return (h("div", { key: 'e2033f2294825d4208922a3705030fdc4410248c', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '46800b3d5e1faf4252a9f2eca77e5a35361c61b9', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'e296d279b91e3412d4bb11410eb7b752208828ba', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -298,11 +298,11 @@ export class DuetTabGroup {
             } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
                 "duet-tab-group-scrollable-wrapper": true,
                 "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: 'f2b527640c52f4217c8dfd7c0b64849068b7eb8d', class: {
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '58eaf09f8633b86c594a0cd2662f6bbfa0a160ec', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: '0949201345b7070db4ccf011171183115e518707' }))));
+            } }, h("slot", { key: '45359a79c82f0c35f1a5502c2ecb8af934ad9248' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'fda81d8548a6180298f6e227832f9c7105a68736', class: {
+        return (h(Host, { key: '02ed0a7f4b3c7504b0f6df2ee9e923f5afbca106', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,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: 'ac3ae69d0a1141e1feacd1bdf8fb3ba9e9e89080' })));
+            } }, h("slot", { key: '946a620f959caf19dc712844d81ebc345870757d' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -178,84 +178,75 @@ duet-tooltip,
   background: rgb(255, 255, 255);
   border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
-  transition: 150ms ease;
 }
 .duet-textarea:focus {
   outline: 2px solid;
   outline-offset: 0;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva, .duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva {
+.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 0;
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .has-error .duet-textarea {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
   border-color: rgb(214, 28, 82) !important;
 }
 .duet-textarea[rows] {
   min-height: auto;
 }
-.duet-textarea::-webkit-input-placeholder {
+.duet-textarea::placeholder {
   color: rgb(98, 121, 138);
   opacity: 1 !important;
-  transition: color 300ms ease;
 }
-.duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-textarea::-moz-placeholder {
-  color: rgb(98, 121, 138);
-  opacity: 1 !important;
-}
-.duet-textarea:focus::-moz-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-textarea:-ms-input-placeholder {
-  color: rgb(98, 121, 138);
-}
-.duet-textarea:focus:-ms-input-placeholder {
+.duet-textarea:focus::placeholder {
   color: rgb(181, 198, 208);
 }
 .duet-textarea[disabled] {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed !important;
-  background: rgb(245, 248, 250) !important;
-  border-color: rgb(245, 248, 250) !important;
-}
-.duet-textarea[disabled]::-webkit-input-placeholder {
-  color: rgb(8, 42, 77);
+  outline: none !important;
+  background: rgb(228, 236, 239) !important;
+  border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
-  transition: color 300ms ease;
+  -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
-.duet-textarea[disabled]::-moz-placeholder {
+.duet-textarea[disabled]::placeholder {
   color: rgb(8, 42, 77);
   opacity: 1 !important;
 }
-.duet-textarea[disabled]:-ms-input-placeholder {
-  color: rgb(8, 42, 77);
-}
-.duet-textarea:hover:not(:disabled) {
+.duet-textarea:hover:not(:disabled):not(:focus) {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva, .duet-theme-turva .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-textarea:hover:not(:disabled):not(:focus), .duet-textarea:hover:not(:disabled):not(:focus).duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
-.has-error .duet-textarea:hover:not(:disabled) {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
+.has-error .duet-textarea:hover:not(:disabled):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-textarea:focus {
-  border-color: rgb(0, 119, 179);
-  transition: none;
+  outline: 2px solid;
+  outline-color: rgb(0, 119, 179) !important;
+  outline-offset: -1px;
+}
+.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva {
+  outline-color: rgb(23, 42, 59) !important;
 }
 .has-error .duet-textarea:focus {
-  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-textarea:not(:focus):not(:hover):invalid {
   outline: none;
@@ -295,57 +286,30 @@ duet-tooltip,
   color: rgb(23, 42, 59);
   border-color: rgb(120, 145, 164);
 }
-
-.duet-theme-turva.has-error .duet-textarea {
-  border-color: rgb(214, 28, 82) !important;
-}
-
-.duet-theme-turva .duet-textarea:focus {
-  border-color: rgb(23, 42, 59);
-}
-
-.duet-theme-turva .duet-textarea[disabled] {
-  color: rgb(120, 145, 164) !important;
-  background: rgb(245, 246, 247) !important;
-  border-color: rgb(245, 246, 247) !important;
-}
-
-.duet-theme-turva .duet-textarea:-webkit-input-placeholder {
+.duet-theme-turva .duet-textarea::placeholder {
   color: rgb(120, 145, 164);
 }
-
 .duet-theme-turva .duet-textarea:focus {
   border-color: rgb(23, 42, 59);
 }
-
-.duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(178, 194, 205);
-}
-
-.duet-theme-turva .duet-textarea:focus::-moz-placeholder {
-  color: rgb(178, 194, 205);
-}
-
-.duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
+.duet-theme-turva .duet-textarea:focus::placeholder {
   color: rgb(178, 194, 205);
 }
-
-.duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
-  color: rgb(23, 42, 59);
-}
-
-.duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
+.duet-theme-turva .duet-textarea[disabled]::placeholder {
   color: rgb(23, 42, 59);
 }
-
-.duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
-  color: rgb(23, 42, 59);
+.duet-theme-turva .duet-textarea[disabled] {
+  color: rgb(95, 122, 143) !important;
+  cursor: not-allowed !important;
+  outline: none !important;
+  background: rgb(228, 233, 237) !important;
+  border-color: rgb(178, 194, 205) !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
-
 .duet-theme-turva.has-error .duet-textarea-help {
   color: rgb(214, 28, 82);
 }
-
 .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(120, 145, 164);

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

@@ -31,7 +31,7 @@ export class DuetTextarea {
         this.labelId = createID("DuetLabel");
         this.errorId = createID("DuetError");
         this.characterCountId = createID("DuetCharacterCount");
-        this.visuallyHiddenCounterDebounceMS = 1000;
+        this.visuallyHiddenCounterDebounceMS = 2000;
         this.disallowPatternRegex = null;
         this.charactersRemainingLabel = {
             // The comma in Finnish is to prevent use of partitive case for remaining
@@ -132,6 +132,10 @@ export class DuetTextarea {
          * Component event handling.
          */
         this.handleInput = (ev) => {
+            if (this.maxlength && this.nativeInput.value.length > this.maxlength) {
+                // Android doesn't honor maxlength
+                this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+            }
             if (this.disallowPatternRegex) {
                 cleanValue(this.nativeInput, this.disallowPatternRegex);
             }
@@ -165,17 +169,6 @@ export class DuetTextarea {
                 component: "duet-textarea",
             });
         };
-        /**
-         * When the character limit has been reached and key is pressed, switch the
-         * visually hidden label temprorily to empty so it is re-read.
-         */
-        this.handleKeyDown = () => {
-            var _a;
-            if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === this.maxlength) {
-                this.visuallyHiddenCounterText = "";
-                setTimeout(() => this.updateVisuallyHiddenCounterText(), 10);
-            }
-        };
         this.getDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
@@ -247,17 +240,17 @@ export class DuetTextarea {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '48030acc05f6f8415df8753151991eb3c83ae370', class: {
+        return (h(Host, { key: '05f3a128ed669c1c1ca8c0a2a18b3e031b324813', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'e8cac00d84bfbef67bb1f30037bb986905fc2d94', class: {
+            } }, h("div", { key: 'cdd7bcb109c16962d31337146fe774bc7efb248c', 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(DuetInternalLabel, { key: '2f25117dc9dfce852022a09efb8a1b0c2117bb0c', 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: 'b5c614194a8699068a2b9c9156cc2a1955d8ae8c', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '0a72de201a51d22df2604f3fa1a5fba77f9de897', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'fc1baf023f9c4b81131de5244bfb73c925ab265d', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '3395893df5eacc499f082eade175e6bb0ce0512c', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '6a71fad928ba647c069c05439e86a5e6eefd4e40', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '28c7559a63890bb80d6503e3028ea430f24c739a', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, 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, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '66ddcb0507cf754111843d5aa871c80ae8d7207e', alignment: "stretch" }, h("duet-grid-item", { key: '79edd18dd19f6500b2c471e960c5fefc1b9492be', margin: "none", fill: true }, h("div", { key: '38d0f75afeefcd4ba8afb2f87802a64885fbc0ea', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'a03fdd80d3a82221abbdeeff8c368d8208efd2b1' }, this.error))), h("duet-grid-item", { key: 'deb6e76efba3354828dd21acd8a362c91c3d2e4f', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '282fe11b68a1bdd7c63b8071cfd37a3e33086bbc', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '06b481e31a4dad73a6538a943274f898410be541', id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
+            } }, h(DuetInternalLabel, { key: '9577e3a46d2b1344744377fbada4ad5328482faa', 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: 'c7dfb100492fda0d4b0520a94817a21ff6f7b2f4', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '73d669dcf81bec021dd60d536bcc868a1219493b', name: "tooltip" }), this.caption && (h("duet-caption", { key: '87e9b7e449ab45c533471f0e4a55a56a2886938b', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '3d776d906f0c1aaec10060fea52ed11aed6cae20', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'c11be289c215a5a4a2487cffcbd3c154e266b506', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '20ad68b533a7f0ff28ab8d4834eb8d98640b80fa', 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, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '97abd3da766e5639bfe79bf20bb8ba0d8445cdfe', alignment: "stretch" }, h("duet-grid-item", { key: 'fcfe43263013ccb1df5f6b4ad99ba412d224ed87', margin: "none", fill: true }, h("div", { key: '88a02d777a98f50bf1827da24cd1b8e41826714f', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '626befd06c4ce9ee080962e223e6b0b5c90a52ee' }, this.error))), h("duet-grid-item", { key: '58e2571ae0fc52c2488b64aedfb26c722a90be48', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '3a0ae7aefb6b52348a252b49cf166139cb1b4e27', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '146f69804cf6df2efcd04212e8853fdf15524f77', id: this.characterCountId, class: "visually-hidden-counter", "aria-live": "polite" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -170,7 +170,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 

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

@@ -118,11 +118,11 @@ export class DuetToggle {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: '12ad6e6c8bae45cd96993f311d30c6d02f9e694a', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
+        return (h(Host, { key: '59feea89498c2b31bdeb767328bffb2d92c81856', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-toggle-is-disabled": this.disabled,
                 "duet-toggle-is-loading": this.loading,
-            } }, h("div", { key: '0e6d8fff7a161badbca1e6ddd3f737a9e427f67b', class: {
+            } }, h("div", { key: '7d66f262fd726f6552ccc0b4fcf7d65f79168bec', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
@@ -130,7 +130,7 @@ export class DuetToggle {
                 "duet-label-hidden": this.labelHidden,
                 "duet-toggle-is-disabled": this.disabled,
                 "duet-toggle-is-loading": this.loading,
-            } }, h(DuetInternalLabel, { key: '9332567db03213ffaa47ff809c83df430d5b1241', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: '33454fd79ca7bd7b3a4299168670314b405f7714', class: "duet-switch" }, h("input", { key: '9348a34ee41b6a0d0f87b195b18017027060458c', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled || this.loading, ref: input => (this.nativeInput = input) }), h("div", { key: '13e7568ae9a6908846376af469bc49eeb628d1d9', class: "duet-slider" }), this.loading && h("duet-spinner", { key: '7792ecc0f2cb3088d610d056a832f8014a58cd7a', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: 'c85ca8652e522b36dd5f41cf68e3737e653797d5', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: '56b6fd4c32315ca57250176bb996a86b06e1b3f0', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
+            } }, h(DuetInternalLabel, { key: 'b51094e9ff80a2d2d38d62207031e882e22c6594', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: 'e43214898c9e9db3cdbff5a9bebb6a4123a1f60a', class: "duet-switch" }, h("input", { key: 'e7c74dafd11c4afc1bee288239f0e7fd3a07259d', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled || this.loading, ref: input => (this.nativeInput = input) }), h("div", { key: 'a44ada35c0d948eb093047aa5ebbfbdcd06d8da2', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: '8e3400e0d490ca097597adb600b7a6560593c4f8', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: '8cf3c405c4765f07b0e96359f88e527d0070be46', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: '5738bb3897bc0b07ef73299a6d12901c8c8be40c', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
     }
     static get is() { return "duet-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,11 +36,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'c860be4ffbc7d94876629c2039b767516ae67069' }, h("nav", { key: '93355e73bf35ed26d242a3e08140140f09d4cbcf', class: {
+        return (h(Host, { key: '2434866ef0b95d7b07a2248edc89a4f473d9ecc6' }, h("nav", { key: '9938a3cd11e5230013027cb613c8aa81f95e5bf7', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'a50a6a5ec9b49d85edcbc10a275264e95a6ad93b', class: "container" }, h("div", { key: 'd3187fa520b84678f46876238269b9e3f48aced4', class: "list", role: "list" }, h("slot", { key: 'd0a092e1c45ac428b73d549b94ac932e3f4e871e', name: "left" })), h("div", { key: '90c02bddb8937b6e48648a2b758211ab88ae4b00', class: "list", role: "list" }, h("slot", { key: '8d66429a3b7a5d4ca4c3a570677c5fca14915108', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '9c915e9ffe872ec9b253bf9c7b7ca58ac5c39bee', class: "container" }, h("div", { key: '7a1ce3f543e9b908638de889a1b6b8270f73d830', class: "list", role: "list" }, h("slot", { key: '396f255c2694dbff16ae2f2584be49e4f5d4fdf5', name: "left" })), h("div", { key: '975122519f64947d2fc01d8a5c9fa63c3052097a', class: "list", role: "list" }, h("slot", { key: '8d070c2c7e5a168d7c426df35a4b742a95696383', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,7 +49,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva {
+.duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -64,18 +64,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '22441fcb5b8138475d82dab2645eb4be7acc7683', role: "listitem" }, h("div", { key: 'ddda27f016e058d656ebef316dbe040559949c88', class: {
+        return (h(Host, { key: '7af8e188b72d1dd79f3445c543736d3c18d694e4', role: "listitem" }, h("div", { key: '128c0412da716469ad79877951bf5b81f7987515', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: 'ecdfa65704fb809858dd451e2cabd81eb6362def', 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: 'efc3cbf2c159c3b8a528e8ee58312bc9546b561e', 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: '094d722d70d59a46406f1e0eef3b23a2d2bfa58f', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '574c62534b8ee3098ed1bcd1a68bb8ac21712a1e', class: "label" }, h("slot", { key: '702645793ce1d7acc23ab3d81ca340c34d68f05c', name: "label" }), h("duet-icon", { key: '26e38570a74cd2d6997029053bb462449e4542e3', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '5e778fe7b21fea29300f437f18970c419fc312e5', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '502ded69ce168a1de15bd937aa8c1995f2b5df88', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '8c4851a8137ab50f524c9d24618f612834f38669', class: "label" }, h("slot", { key: 'eebb0b4107c2060e48b334f35cff1458fc7b4d7c', name: "label" }), h("duet-icon", { key: '961bcc314c446a4b85ae1259b67d5566a0dd0656', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '843d1e28eb1a821021ff4e6c96269bb437980de7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'a8694deb60b5d8fb5b9131cec991471ef0020a83' })))));
+            } }, h("slot", { key: '60c2a9af5229e10192605b60f2aaf8d65e136d42' })))));
     }
     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

@@ -45,7 +45,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -45,11 +45,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8e41d151e3313b5891dff17b78353776a85a8f07' }, h("a", { key: '1dbfa3d41901af78023b0121f0b5d4699c88a190', class: {
+        return (h(Host, { key: '34a5369d2806e4474bbb32400d5563fddcc3590a' }, h("a", { key: 'b16d10c8be40329d90136c486d568fb9511524d7', 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: 'e33514dc4358840cbc8520514b16e519a56458ea', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '3c1420a627929ed17d384db1762e55918ca055f6', class: "label" }, h("slot", { key: '73cd382bf5e2f19e5d1c6e2e64d0322021f19635' })), this.active && (h("duet-icon", { key: '22214495161d78c4f620a84a03089f018d377400', 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: 'cce54b8721ad1d017e32ac331ebcc54d53fbd88c', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '515f4c68a3917e3403e59f938fc2a2ba296e1f63', class: "label" }, h("slot", { key: '43e7eddd00dc07766e9842a4070f09e908021551' })), this.active && (h("duet-icon", { key: 'e69da314290045e523944a6d3554158627151d48', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@
   outline-offset: -4px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
+.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: -4px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -86,17 +86,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '82a17ce8483bcaa16bdef27b50238898b81a7549', role: "listitem" }, this.badge && h("duet-indicator", { key: 'd1a27a07f28a95232cde24a20f05a0a2d7f61745', variation: "change" }), h(TagName, { key: 'c2192a7a73d5f09fc1acf9d13c7f2f2d26af7def', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'f36d0228f8546f61bd7f1a21fc94bbfacb229270', role: "listitem" }, this.badge && h("duet-indicator", { key: 'a46dc8ea7f76a4f8c76664dc4e1ad56941028a10', variation: "change" }), h(TagName, { key: 'e488df937c34dadf25be1f2beacfe29161ba73cf', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '00b85b5398cc6a21478840d79a11fa91270d74c0', class: "duet-toolbar-icon" }, h("duet-icon", { key: '73ffe104fcc9af56100dbc8f863e207efb93a2aa', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '4d185a66ab6fdf842f0d8c967fcb621fcd30e4d8', class: "duet-toolbar-badge" }))), h("slot", { key: '9fc239303a5fdb7931d47ecbb57649f0650c2fa4' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '4643254add55b63662d8c133c4c235110f82f2d7', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'af3c48ea2d30ddb9f7569626d49df896e6be8206', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: 'fb792acb4d635caf2dbe6d6b34eb7ca0257c6425', class: "duet-toolbar-icon" }, h("duet-icon", { key: '7aeb14377fab6bbba397bdcb85942bc7f9026f99', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'f2a6ed7704a7d21782c32fe02f1d768203a0e543', class: "duet-toolbar-badge" }))), h("slot", { key: 'c5f8d0d4644d68d9ae8bae97f3b26d9cb7ff2693' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '1258c07b9515853adcc3461d186240ba86fdc491', class: "duet-toolbar-icon" }, h("duet-icon", { key: '3472d1724fb3d148dd2ac58a964db4ab2ae7908e', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '9b26ddf0fce82536ea49fec8fcfa2973ae732e84', class: "duet-toolbar-badge" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: 'df9aa0697ed176678be4f45596c3276da1218a33', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@
   outline-offset: -4px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: -4px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -38,12 +38,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '82d0a3759f48e1d3770e078ace177b7024958e6b', role: "listitem" }, h("a", { key: '3865f0bcb98452a4b3f68e0242ceb7f0927dd4ad', class: {
+        return (h(Host, { key: '37bc6a6543039418aa1450349f23f7eba45adadb', role: "listitem" }, h("a", { key: '55cc4a44d00c2d228ab14686063417d471beec5d', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '09e4f28e3bca743b155330a0df9400bf47c51f9c', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '68c25000344101d59cd7102c51b072636137fd62' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '363fec506c3668d762b5a706b720f4ab8efb0bb5', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '086cbb4a926a01fcee0ce4d7ca417ad031c60110' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }