@duetds/components 10.3.1 → 10.5.0

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

@@ -52,18 +52,18 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'bc86e96a57db15bb14d665edb554ef6372633c1e' }, h("div", { key: '210b0bc2779a333ea5da5d9aa80f52ff94e31bab', class: {
+        return (h(Host, { key: 'f64a64dc68d8df8aebfa507aa995894eb65bb2ce' }, h("div", { key: '18fe7e1d42915f5c5363c5eb95e86db85b214049', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'ec70dde7f96e71aebf294a8effe5c86887e6579a', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '06555319532a4a266c061fd1d9c37170c8f9fce0', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'c2e90527626b6f3206a3e4d1cfeefad2f51aaea8', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'd746147d5a9a5740daa2c4418394e5dca3d28f00', class: "label" }, h("slot", { key: 'b28cd31ec212453b5548759a5b882c64b9b04b9d', name: "label" }), h("duet-icon", { key: 'f53de55018fb41696fd32f55b6a365bcb8c4fae9', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '5fe02a87f042543eeb9c978ca3aedb2e973547f8', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '0ea9ceb0e10517319ada16db751234cd3f620d69', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'd2fc1e1e76b6cde371078a56be4f463fa2592ab2', class: "label" }, h("slot", { key: 'e24116c6f0faf563303c6cfb862c635b5b46852b', name: "label" }), h("duet-icon", { key: '8cd1fdb85c9b4c70767c962dd87e4363f79cb384', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'ff90c4f48368c6020919db5272954fbeaf25bcbd', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: '277a15c1a43715a4562f4e99e644972ade293982' })))));
+            } }, h("slot", { key: '7e267c038e415f115df54d5b9ff2c7354614a9ec' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c528bde6cb4834c7b89630a87a1d9add5438473b', class: {
+        return (h(Host, { key: '76988a79c56144ea938670ea5a369478d5cbbb9d', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",

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

@@ -25,7 +25,7 @@ export class DuetSpinner {
      */
     render() {
         const color = !!this.color && this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
-        return (h(Host, { key: 'ec9e97fce056ea29ab963b3dc0acbf65ef74858b' }, h("div", { key: 'bb244cf728a5ea38b7f65d486e141d314d4b79f5', class: {
+        return (h(Host, { key: '61675c5a2a19edc0eba1be2f591f2bde7a7ab8fd' }, h("div", { key: 'cf612fe4fe85f35a7019913136249169aa74163c', class: {
                 "duet-spinner": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

package/lib/collection/components/duet-status-icon/duet-status-icon.css

@@ -0,0 +1,39 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  margin-bottom: 16px !important;
+  display: inline-block;
+  width: auto;
+  max-width: 100%;
+  line-height: 0;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host(.duet-m-0) {
+  margin: 0 !important;
+}
+@media (max-width: 35.9375em) {
+  :host(.duet-m-0) {
+    margin: 0 !important;
+  }
+}

package/lib/collection/components/duet-status-icon/duet-status-icon.js

@@ -85,13 +85,24 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: 'f2af4364319cd502dff5e2f28bc872efc3baa29c', class: {
+        return (h(Host, { key: '66f1b0519e8fcb4b025f2e1b64963c25b78b0ce1', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: 'eb4692810e48c350dbd8fc15e0de0825f5f9a700', icon: this.getIcon(), size: this.size, margin: this.margin })));
+                "duet-m-0": this.margin === "none",
+            } }, h("duet-icon", { key: '91b2d72ca3e85296b48e4cec8c9c5908c4025649', icon: this.getIcon(), size: this.size, margin: "none" })));
     }
     static get is() { return "duet-status-icon"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-status-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-status-icon.css"]
+        };
+    }
     static get properties() {
         return {
             "variation": {

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

@@ -93,13 +93,13 @@ export class DuetStep {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '402b9ef15bf57d82500a6023c38c8b66a110cbb3', class: {
+        return (h("div", { key: 'feada3a7c7ec6780e79afdb23123316ab540f4b6', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '5a662389bfc0190eee39c36e887c87b6a6e1c9a7', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: 'ee1ed37d30f81e67d0225f48b05bc943260b7fc6', "aria-hidden": "true" }, h("div", { key: 'fd82b877aeec047f0252cd67ac75a645ce25ae87', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '2cd749ec01d7ff96e3f8314ea5a8302c5308786b', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: '9753159df4b338e209f10696a3a3d35511182dc0', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '4f3478927a7fc558bab501572005326a74557f42' }, h("duet-heading", { key: '0e19fa8804cb73f223d5aa2c8b0418ce3f1ff43a', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '250acd88c2ac6875d48595725534ef3d67fd3e65', direction: "horizontal", size: "large" }), h("div", { key: '00459e0dda57b0b45765c55536a12387c1b6dd05', class: "duet-step-heading-slot" }, h("slot", { key: '4ce1521d0945fe88517baeff6cad9eeebb8b84ec', name: "heading-content" }))), h("div", { key: 'bb20b48bd02201119e0e19e7601c3e6548268fe7', class: "duet-step-content-wrapper" }, h("div", { key: '010c7d8b6c1bd587e6eb010ab392419a44ff2bea', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: '7cc7227663f61830eee19abcce032944845f3543' })))));
+            } }, h("div", { key: 'db476849907739144958c523a74ff59d4fa02cb6', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '50c87080ab159d3c3b21291b364ec76ff0fa3a93', "aria-hidden": "true" }, h("div", { key: '42a157140c2377439884f0af12b4248dec9bfd34', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '94aa9e260262de0b9cea9d2fa2c47eb10faded9f', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'a03e66e47f83ca929b0df04debceb86a2a689b40', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: 'e4da79ec72dc0e986030cd3254f07d0313a7fb47' }, h("duet-heading", { key: '74b1068c7b0625bc4252c62882e596f44205a458', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '3d65d8674ce6b54a17bfa9c355dbf1bb6ab6b4a4', direction: "horizontal", size: "large" }), h("div", { key: 'a17bc89f352a7160004d00a64aa650614fad31e9', class: "duet-step-heading-slot" }, h("slot", { key: '01a89d91a83a2a60e32d88d408a75895f3c68df2', name: "heading-content" }))), h("div", { key: '730bd661a145a1c84f6b475671343f578195454e', class: "duet-step-content-wrapper" }, h("div", { key: 'a95661b180820900e0064b370e62db765a05fcff', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'af8b9819618629683931e6a11e89011e5de7e427' })))));
     }
     static get is() { return "duet-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ef1f504037c4920540f46a3f9982168761e2a466', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '9278a6186eec68f71f7b7c9273fa030516a819e4', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '47c61ae2f74abc8863c8494c4c751d8adecb325e', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'abb85008b953631b77cbb55903dc0b428b922c2c' }))));
+        return (h(Host, { key: '8a749ceb402c16d72935d15c496ca811cd50b957', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '6aac613a7d6f22aea18a8da6971fdba169e6fa1f', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '329b1de26e25748913712e9f6c02890ac3aa1431', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'a7346309c44aad2e5ab18fe0ac6d8d73af8b29f5' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -131,19 +131,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f7a1424b603111719ad2b1c8a4bdcc2411b3a081' }, h("nav", { key: 'cc3405015c8f8db4a147ce964e700bc6cd7fc5ad', class: {
+        return (h(Host, { key: 'd3c7f13bd97536a6c8fc957eeff995a11cd700f1' }, h("nav", { key: '33d3db0a43395d1211e77d348ab5cc1200d55f16', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'f7418635c9233de3149eb7187c5c28581ffc0ddb', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '5d58b7f7a4f45d64f55533a007972a0fe334dbc8', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: '11d96b23752b2bfb2f66b4571bb1bd786a63fd04', class: "label" }, h("slot", { key: 'd4fded0c5ec69fc717560d4c26fd8dd52797c3c3', name: "label" }), h("duet-icon", { key: '1bb8ebe20730cde32574b267fa04b2c2d17a5ff7', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '633cdee4191cf6c0fe11cdb2f93ca8c1ca59f8da', class: {
+            }, onClick: this.onClick }, h("span", { key: 'b63c704252ae0abd39443445c66f0e8d33962bab', class: "label" }, h("slot", { key: '66bcb4983acd319a25ddd403c53cc0eff6a100a4', name: "label" }), h("duet-icon", { key: '139459aa15d1fd051c14e53ed86927cafdb82a96', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'cac6ef2a388f1b6dad1673e3d7198b48fe5ae5d4', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '861548f8913d74bc3f24b2410a72ad15dbd7f587', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: 'cbd1192338ae183ad463075d7081ec224704d59a', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '710a4f3c358154beec6b8147be4af31e0a4aba63', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '741903389bbbbfba594fd771d9717cf5cf078f6b' }), h("div", { key: 'bab1f798a808dbd4912e74be3319000a8a7409e4', class: "list-padding" }))), h("duet-overlay", { key: '5e36e837ff3020fb08c9df56004e3816065b31ee', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '1ed2556ebc4900043e6943cd26405739e933799a', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '3dca8078e8bebb973a96a1a727610ae5fa903db8' }), h("div", { key: 'a4cbdb268b4a92530189e6e212b4b8bd7c2a92e2', class: "list-padding" }))), h("duet-overlay", { key: 'b954f6be12e9613c2ef6d464034205874cba6f98', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -108,18 +108,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1f7a8c55ce1e51e82a3689480c19cc1251290d98', role: "listitem" }, h("div", { key: '7abfa84100114bdcb753454bd89351dbcdc88213', class: {
+        return (h(Host, { key: 'b6cb68f4a7f9031d91d1ee24dd9d2c9362ac6725', role: "listitem" }, h("div", { key: '7e96c76557c1d6e73b30ebca3306a894febcc82c', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '8d3069e56fb9e3f17bb4d2171c6bf51939636160', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '7b67d1dcae40e2b849bd6510b40564232c0d5ef1', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '23659097e23b1b8b6cc66c130efc4cef0fdab84e', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '73b4d7cb0dd0ab9126819bfb6efbe4c40dccedca', class: "label" }, h("span", { key: '87d378945d46f26dce82b517fb42f396e7df5851', class: "label-text" }, h("slot", { key: 'f439f973c8ce98419368730c77bc3bda1a2472cc', name: "label" })), h("duet-icon", { key: '2dda29cbf50739e0866d548c7a9278d67411f412', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '2a9790a190e4138942625f10f82a6b94326a2ebd', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '7930a2bb5271755d5bef2033ab4d26e0a1066a3e', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '421394660c70b14303e7a1ac02077fa2b738122c', class: "label" }, h("span", { key: '0faf06b99e50e65a857da85c547a4faced3ca773', class: "label-text" }, h("slot", { key: 'b1d4f70cfb107ff5dd4babcd7d0da42d2e979f56', name: "label" })), h("duet-icon", { key: 'e240873040259a28f6d5aa3a86600114627e2a97', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '6336348bb6bc7f8cd5630bdbbd3f36920b6ebe5a', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'ad75bd23dd9f44bff12f360a43871991bf3ce653' })))));
+            } }, h("slot", { key: '1f3bd9f1dabf44b36839eb121c965ead3e3c66fa' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,12 +49,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cf39c11edeabc413beb507824669b8643dc9483d' }, h("a", { key: '291903d9b4ed68200261fd220c91810743b7216b', class: {
+        return (h(Host, { key: 'd7f1a1d392bb3537d252a930db732bb9a062aa1a' }, h("a", { key: 'f29d863d04d3fb1a4bdced3ca6f4c474dfdf686b', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '1692f9ab28f6ff8f511c16b70114b8f3c09601df', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'e18089da6ed52e191fee80b2019ebda73a9e9afd', class: "label-container" }, h("span", { key: 'c2cf40700298a1cca291de75837dc160bf717660', class: "label" }, h("slot", { key: 'f3759d26e0aa969a2307c588b5bd45ac719a5acd' })), this.caret && h("duet-icon", { key: '5db240602e615080a1f7c39c78bbfe5825aad01b', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '9ba464ebfea65521317485870f9f9423d3e5ca02', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'e971fcc188cd3bd8165992bf590ca2eab7ac36d2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '0098384100989c6ce00468717181578c80d39577', class: "label-container" }, h("span", { key: '7a7114ef344ebe12bbbf1a86aa1adc93f6877f1b', class: "label" }, h("slot", { key: 'c5ffaea2de58f7b00416bd02d103063278951d6c' })), this.caret && h("duet-icon", { key: 'e0c832ffb658a7561ddc817f5b5af9aa70780bea', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'f178e2e11a936dba6e05987d34fd3ba6a9d2ad02', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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: '735cb5e8a3625bfe6e53685487cbdcad30174387', role: "listitem" }, h(TagName, { key: 'a1adc91fe24f839dc5b7d07a10c33ba4d68a7cbb', 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: '5a06f21d4ca339c5869d764fff0857cfbbe34145', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '65c8858c5b3842e6d2a4cb5ce4760d7ace3b9b52', class: "label" }, h("span", { key: 'ffec01ed19cbd0dc1d819901d5988a819120a444', class: "label-text" }, h("slot", { key: 'f7380688b2e9d1eb11de668f77a7b7a77e46d124' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '5117739fbacf4bb87663bb107342da775b492d21', class: {
+        return (h(Host, { key: '003100904b0f93856bed193bd01dc1e376b06e6f', role: "listitem" }, h(TagName, { key: 'f16847c6d388d57dca985f6a6ddb9b0d6e1c6157', 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: '71b069df0ff1d797f2992b865e6ccbae58ac88d4', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'ff67a89fe841a2be286bffe807a171854cfe2c1f', class: "label" }, h("span", { key: '527aa1d31d10d8b327c62d283882e4c5dda3d362', class: "label-text" }, h("slot", { key: 'd13184e6dc0881e5596c8c9ad59031db71300f33' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '6f1a65c84496095f3fb339ba17f0a80ff9550b03', 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.js

@@ -41,7 +41,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'aa10443ecaf64baafaf3256739019432edfdfce3', role: "listitem" }, h("a", { key: 'fe2b14d1ae499d49f717085e29ff27af3ea7009b', 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: '44cf3738a413e100b1dc5bd2a3722081b6e9baed', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '23ccdc13d96b626e45b78e5122bbb54840bb2281', class: "label" }, h("slot", { key: '4b0bf13253c816e7774765b1223592583f4509b0' })))));
+        return (h(Host, { key: '0b8ab66aa806a5cda83d91b525f0df8f06d594de', role: "listitem" }, h("a", { key: '6afed3047487660b7f969cd5064b985899a86797', 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: '2c2b94f00eb0428a73255667ed7d320fa81bac1f', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '98e5c15c559592573613071d617fc46cf2b8d6f5', class: "label" }, h("slot", { key: 'b99c0f46131d490d6aa540d646fc7750c255c4b4' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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: '6c6bd7f4b90785a517f5ffaa206a1cf5bb8be020', ref: element => {
+        return (h("div", { key: '12b8133d0bbf92a085f5c39db06ad4f61be77770', 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: 'c68e037d36ea1953da46c6c914c77e38b1f2151b' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'f4d601ccf9017d30770ea9eaaf5873b32fcab605' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }

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: '1a61e0491f88c0a88cde77ebbdfd0030b574b537', class: {
+        return (h("div", { key: '9662897bf265783e330558b8a1b463729026b044', 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: '23a7b5dbb12fb5386fabcde92a0806d1f037ae2f', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'bbeef489c8be2a79c22b7fb355a431fada517c63', 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: '9727ecb4d515a36fec55607fe35eef78b07b3877', 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: '48bc3f8b5d1ec742e59db454a6b1649e29b7605e', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'd5634f255c0d4ae18026e471a64a77d6dbe78854' }))));
+            } }, h("slot", { key: 'b6af6d77ff36c34028e664664c71ed391a54066b' }))));
     }
     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: 'a1dd7fa3685f9dba8b9e5dca8a0fd24c14431658', class: {
+        return (h(Host, { key: '9f1704f22fc4624b02f78c7aef30b43a788ce295', 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: '3f4f49a2dc93f99278caa0089c0305a7049817e6' })));
+            } }, h("slot", { key: '110acd28c9af7e36e6be318cfc5ad44251b72d32' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -205,10 +205,10 @@ duet-tooltip,
   color: rgb(181, 198, 208);
 }
 .duet-textarea[disabled] {
-  color: rgb(127, 150, 165) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: not-allowed !important;
   outline: none !important;
-  background: rgb(245, 248, 250) !important;
+  background: rgb(228, 236, 239) !important;
   border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
@@ -298,6 +298,15 @@ duet-tooltip,
 .duet-theme-turva .duet-textarea[disabled]::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);
 }

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: '628cfbee772dabe02ee28e28b45ac044ba306433', class: {
+        return (h(Host, { key: '211eee926b033df681bfa181f836ac43a4c0ba09', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'd3b269724ee0b454556b85713e4ce8d0da937121', class: {
+            } }, h("div", { key: 'cfcf260b9fd091276f51e09091a33ff4c3a83d08', 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: '61b9d1d31d1c97ec59cc974fd3cf05e99a52c648', 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: 'f50f8d99b9b3459d8b14ad5de3d176e7d995bbde', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'aa111583f2f02af223491081de0ce0aa1d9e513e', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'd229d33d3027940241f0b38348af8c3d79618856', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: 'ef6a5f4d22a441b13f559373096294a657b22b74', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '728f08f538d521047bbc91ccd7bd3434d3e35cb8', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'b652877e0466100acb59ddd879bcc8eb3f833649', 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: 'eacd3bbbf8d40c476ed4dbdf5f6d2608d57303d8', alignment: "stretch" }, h("duet-grid-item", { key: '87e2b2af0d568101cb6535822b6b3f665240b080', margin: "none", fill: true }, h("div", { key: 'fe677c931f07c771e5146256ad638317416bfa64', 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: 'dd9d05aac20cd6eda3b66f8117ec74a66ab78a8a' }, this.error))), h("duet-grid-item", { key: '668485a22c325707308e35875136d289b65d8285', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '3911ad43e20c911266a1ee6446e7cbfecbdc6877', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: 'f3f27267532f3f62aec64d0b4b472616accf3bf1', id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
+            } }, h(DuetInternalLabel, { key: 'c76014369a86887fda60254a033d25a7b7e1bfb5', 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: '9abca81aad0578f879a60f7ad3c3c9c4bf802844', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '121037f9cfc26ca53cacec00d649deb6bc27f9df', name: "tooltip" }), this.caption && (h("duet-caption", { key: '591ea1c34b2d913e57339154963abca7250306c2', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '76180b11f3d1a22ead10da74a5859ad834692b23', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '45421d1cb662348a134379db56d11fc5d596258e', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '90db389f0d9db7978f0e89549b32256a7f7e2bac', 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: '87dd339097470f80dd947f348c77b116bc4e03dc', alignment: "stretch" }, h("duet-grid-item", { key: 'e262e22da2fb8ebeef06d26a7ba8745c6847ea17', margin: "none", fill: true }, h("div", { key: 'bf6617b4e6cbdd0acdf6d8e0e10a93c06b74cdc1', 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: 'ff43fd8b7d10d76a7277ffefed9ad8cfc382e126' }, this.error))), h("duet-grid-item", { key: 'e282c9a57669043a61480a74d9f8e4706f91c9fa', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: 'bdc58d108462478349be98a5a082fc3a77a617eb', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '07ff710ca4335176c57f2131b257e727bf5f15d7', 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.js

@@ -118,11 +118,11 @@ export class DuetToggle {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: '3ec57cff6ce3da317cddd00e7bedbc6650b5241d', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
+        return (h(Host, { key: '89f3936593f8ca70269c76f52de881f4de9cbf0a', 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: 'eee3e6b5baf3b19f1b3def60257a86bba82937f1', class: {
+            } }, h("div", { key: '601e3dae811479b1295d3c1ed6f83c03dba12540', 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: '34afba6477ca751f3a522128482b8adbd032ecfc', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: 'b7148a180db8be5f24af8b07f78bdb1678135fc4', class: "duet-switch" }, h("input", { key: 'c1ae34876134d4a2b8e747ea1145a8230c1f793e', 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: 'e18149d2e165965f84bcd1c723b26ad86ad738f7', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: 'cb04987318d4ae466376b787fbb822b22da90b68', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: '41123444b69ac84d498781b6301c7188ad9c8293', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: '1d149ecd3ba90ed78770782efbd87082689776f1', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
+            } }, h(DuetInternalLabel, { key: 'be5948b0ebcadfc14210f34cca8eeb1fccb06502', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: '3f8647b2608163e46f15301079fcc8b122ac3c33', class: "duet-switch" }, h("input", { key: '42a3b6cddb829fb45229d8369771656883036973', 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: '91479d3cf87e7a3740a50a79a79c1f677e6f8112', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: '84e0a5c60ce9330f5e4f528e27071ffcd74d1663', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: '6899d3cb49f592f7fa15aa7b3878678f0c9a3225', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: '3ea3bee89470aae2c080774a208a8b47f90599d2', "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: '11cac89e811d6b909196be87f12ddf03fabc3880' }, h("nav", { key: '811f12c8c160dc6ca955cee1c442289e5be2ca87', class: {
+        return (h(Host, { key: '61e98006169a65d7bbb6625d7451f91f668e35c0' }, h("nav", { key: '82ab3b6e4e0c48b63a0fd35070954c2a5a20a354', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '386f1bc773de6027405dd241f7bf55c247e253da', class: "container" }, h("div", { key: '628fa593433c532ea8ba5e2ff728dfbbd03fa2c5', class: "list", role: "list" }, h("slot", { key: '99a06c1b2878c7ebc0bf9dbca19922fc35c96999', name: "left" })), h("div", { key: '88cf5b6bf106290b9aee832917ffe0cba4de8a56', class: "list", role: "list" }, h("slot", { key: '7cfe53a79d3f81b4a42c6661261698da60aa11df', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '8e5732502152fea0b6440dde585f097993cab4ae', class: "container" }, h("div", { key: 'cfbafa235559cb745df699aa2525ec9b0b0e71cf', class: "list", role: "list" }, h("slot", { key: 'cdf08194cf629b6b753f660c3450dfc0528b78a4', name: "left" })), h("div", { key: '7138e57d143210886eb9b7cdd29e836f35011700', class: "list", role: "list" }, h("slot", { key: '08a8dcaa7bc56cffdf52f5fc5f043b6e44e4efff', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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: '69eac2f06436172cce984b86ca20cc5b63478496', role: "listitem" }, h("div", { key: '9ac7f1b67f30a45617d57343d23126878f74160f', class: {
+        return (h(Host, { key: '22cb35015320274acce981985df55799665b713a', role: "listitem" }, h("div", { key: '466adb2c4849f05177cfe4a50f7ac1faa08949ba', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: 'c0e9bb1221661059cf94d287e2de1e1533c10999', 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: 'dc93624c73cce00736c82811b784ae313e15dd77', 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: '0112de6cc27774c4b74e6c1c72971d64367bd74a', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'f906ad13a862f089ce526428409a26a4e636a7e7', class: "label" }, h("slot", { key: 'ba244f72115c5e4d89abd913c45167de8f209dbc', name: "label" }), h("duet-icon", { key: '9e327c87ecc34f5af2daaca6cfe0e262e3d7823e', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '7e5665a075ed415a199b26b877358236d2a7abb4', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '5f01f840acddd63571251a53b8e5f948ab9f4e9c', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '9bb302d4f43dffd773318d9e51efdac336fca57d', class: "label" }, h("slot", { key: '98ca0e3de14cf72a8744842709e29715940cf9ef', name: "label" }), h("duet-icon", { key: '8cbb044036478aeebb855d566b46180344a42b6f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'b3599e83b70469818f63333ff6b6379ee73d55c0', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '230cab93cb351afae35d7f0a56383e3547048540' })))));
+            } }, h("slot", { key: '28830c7ce0bb0900d77074989dd4f239158ae5b4' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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: '035633abc84750e47b20bdac26530ccbee19265f' }, h("a", { key: '1da75702c3371b0b65de19c2124ce4d815d9efc4', class: {
+        return (h(Host, { key: '3e2d19344c30c5f4aaa61b8ba843140145f9472e' }, h("a", { key: '1c6b82c5be15bb9aae1591a3ad4b677a933f42d5', 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: 'c2d67e5fc451aef6ea005403e844ff5eea233acd', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'bd20fbe5b9a451e62e4e07317e72f59aead917b0', class: "label" }, h("slot", { key: 'b9c034f82fa9d16f81cbe23f3952dc3427235821' })), this.active && (h("duet-icon", { key: '5fbdc8f51e1242ac01bb1e8e6edc3673d7f6d9ba', 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: '77cb536dcca7ad1a91b58af50a9ba02709f9cbf9', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '2dafae9c60150889a0d75f3b87e8744d8d236095', class: "label" }, h("slot", { key: '08c22e9d5dee73d3398843901654cfd78505f5b4' })), this.active && (h("duet-icon", { key: '0a99a17b4854ea9d34a86f762c3651e8ef018bd7', 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.js

@@ -86,17 +86,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '7a26d4462931957a1f1bc5d77654a147ad5a9d13', role: "listitem" }, this.badge && h("duet-indicator", { key: 'cdc9680681aa38be74316f74d4f96d89db25b678', variation: "change" }), h(TagName, { key: '6a0522aec330982bdb0ecc88b35b6b8f549c07eb', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'c3b26e4d4e56b5fcb57e2d2ca8d1a4a80932ede0', role: "listitem" }, this.badge && h("duet-indicator", { key: 'a4d75c4424e5dead88857241566a903d66c5dda4', variation: "change" }), h(TagName, { key: '77679eaaff1b154f672efb08e66f0ad292db0f8f', 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: '91a30ffed6071e0178a6b860e4bca8b27bfa51c6', class: "duet-toolbar-icon" }, h("duet-icon", { key: '7a07df3574f8395b9ea2f9ddcc6b880e41f6ac8f', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '92faf3ceedbe859b1da6ec01080dc38d211f74b4', class: "duet-toolbar-badge" }))), h("slot", { key: '533190e10014971c270a814c239f88277f3fc0d8' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'fd4c0fb114e44e2511b1df3be704cdf587e8be02', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'ae3207c0894228b1532ec15bae02b1768462b2a6', 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: '6c72cdc06b33d97ddecbea15e5691761629cbd1d', class: "duet-toolbar-icon" }, h("duet-icon", { key: '9ad57ebb409bafcb728b0e1c8f7aea4a226ff685', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'fd35055e936b2ec542013846a21ae65f5a713d40', class: "duet-toolbar-badge" }))), h("slot", { key: '4b83ed066d92cdebc3a1bd555881cdc66e65874c' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '613e202f68cb843af58cbfdc8a416c8305dc02de', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'a124e6d2a3235c867451110766122664707939b5', 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: 'f9fff2e52a62cc1dcbb9a5b5e7490701c1d849bf', 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: '22150daad32a8e7a5d4ec06e62d78caf4c822232', 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.js

@@ -38,12 +38,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '3892831234a833b4a247d3de3f9a66c30135e5a2', role: "listitem" }, h("a", { key: '7f8a8e206d7775ed92ab5936304cc4c4aea4147a', class: {
+        return (h(Host, { key: 'd5a11257db70c563cd2b15b062b11fc221b88c51', role: "listitem" }, h("a", { key: 'a104104ad8ad87083e0329f3c7c70d175b2b23c6', 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: '8c58a04f9ee135ee12d4b32aee1c43d5b0e9f18b', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'c6a1605ebb2b6d099a87e430792730aceeb9230a' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '592cc3e8546dfc89ed53a591c367c4f88d18abea', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '2ce50e32cb75f09a50ca4dafdcbc7e94aea500c3' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }