@duetds/components 10.7.0 → 10.8.0

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -38,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: 'fb16f7ca32c1c5b70c7cb19b34d39e0de068a71d' }, h("div", { key: 'fe1252db925d2af57a4dc783d777dbdf691994b5', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'a4597bafb6db9221e482610d9283c992aa42cca9', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: 'df424707a999430019c6cd6853b58ea0d55d2463' }))));
+        return (h(Host, { key: '4553d896b4bfdb640ba3d098ea57128d964a19b6' }, h("div", { key: 'e296a886f0cb3243458c937866a41f2b4be3a538', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'bb80517845c1ee6384be27ed48efc598befb18b3', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: '8bd61a2b46aa5d6f488d1ef61d260ca1f2d6c698' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,12 +77,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '71791bded96b7d6edf41608fc4d9c492741ddbce' }, h("a", { key: '9c8645e7357b0e6a0d5f4407f82f96c6f42aea5a', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: '0fa4145e0ed6826a49aafd34c4ca247e7f2960e8' }, h("a", { key: '8b44ab4f3639e42c46dd9868586eb42a6066f808', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: '8f76be0cc20b53561e9f1bbd954a8e19e1bf98a3', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: 'f1e91400ccba4abe58478161a5123dac9e006554', class: "label" }, h("span", { key: 'c93d3f5220ce1ac55c83985bb1df18511bba18a4' }, h("span", { key: 'af6eba590285a896e6f4b9f9d87db82beb0ef9dd', class: "label-container" }, h("span", { key: '62e6519e6f026941b5ac4f8cc65e638d11512002', class: "label-content" }, h("slot", { key: 'fe67fbd9819d698956bfd3595ebd70e2d03536d8' })), this.external && (h("duet-icon", { key: '56d97a47dc264cf28c0b4b08efa53751ea6c8537', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '88c0508cea00310b08cfb79fe23d7f1e07c44305', name: "description" })), this.caret && (h("duet-icon", { key: '186cd9ee20d9c4302e115c857ebcbc0493289870', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: '7de46db5dc6aee8706a63e96c136aa36b3092716', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: 'edf5b92481f2c7678b5e8d74dd08f62c60875593', class: "label" }, h("span", { key: 'df63061c436078c2decf3ebaabb2e7909ec6df2b' }, h("span", { key: '79e134bfc5b40595760793751a4dfde4b4895638', class: "label-container" }, h("span", { key: 'a69d00a9b25e5ff0a709c27bd5418691a20eb1e3', class: "label-content" }, h("slot", { key: 'abf04341872118d105d8703dca1566d6aa33f6ea' })), this.external && (h("duet-icon", { key: '695eb8fbfe860d0dc19475a255139f9c042ad9e9', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '1587bcc9a12db87d4c4c153d6e938ca136acfedc', name: "description" })), this.caret && (h("duet-icon", { key: 'd40e0716e4dfa8a6b20fbeebb8c19b6868c11087', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -174,25 +174,25 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: 'e178d050a7d1b05d109805a292a393556fdc8185' }, h("div", { key: '6c79968641b06a29f67e2ee641f45ff9523fef0d', class: {
+        return (h(Host, { key: 'd6f887a4066a57a089fbb66e8dcf9738025fcf32' }, h("div", { key: '9e4366a8bf2394467c60c58d9c6e28d3a73eeb70', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, this.badge && h("duet-indicator", { key: '3a621eee3a9e3c82817f57fcaaf685f6697607d1', variation: "change" }), h("button", { key: 'e09accc15fcea78b7dfe5587e82991d0cff908e9', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && h("duet-indicator", { key: '8653c304ca1073549efb1b3b1e530c1d44a414de', variation: "change" }), h("button", { key: 'b5597ee44dfd1e7cd694670e16a6c89cfbac979d', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'f0ad586caf516ba48ad9dc622717cd26963877ec', class: "duet-slideout-icon" }, h("duet-icon", { key: '0b215b49365a40d3ea430879b67ac194ecea6030', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: 'ee8744b33869fa9843cc2ee305b6e3044260adb5', class: "label" }, h("span", { key: '1bd04fd656e987c3805b01032d110fe6fc2caa29', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '93765e7360ebcf9109e6967b06adccfc2edac5b9', name: "label" })), h("duet-icon", { key: 'bfe90da7a1c9f29b695d3c5ffbea797903ca1ddb', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'fe3bf0c1c3af57d903d4e06f904dcdd531d4f703', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '72c123b4d7dafd5c7f390c38422ec80206d0f2c1', class: "duet-slideout-icon" }, h("duet-icon", { key: '28a9b256bb5d354e8da1c5f7221781e727d800e8', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '202044837e321fbacb1ff3cee181a7bef41d0119', class: "label" }, h("span", { key: 'f638d3d0ef1668cf7d427de10ac54e74b39011db', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '3c854c284b0b9efb93e849ca20595949f8436e58', name: "label" })), h("duet-icon", { key: '05ab8ab345187d418d2e847ea7b9fb95b9df48ac', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '4997c8cf6f2f442211a671c1f996e7f0a5bad5b0', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '379e1ff56a13ccc13d288a973907700cef490a18', moveFocusTo: this.closeButton }), h("div", { key: '39ac4d2d35871298e8c66c0601a063ea93842ce6', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '2efa0a702a7f820938802f843dbfb26290875184', class: "top" }, h("button", { key: '61fe6909d29eb82186b3330fa845902ddb4ef052', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '3d7fbcc1526cc861f8b8ed25cd150cd0776e41e2', moveFocusTo: this.closeButton }), h("div", { key: '6263ee14fb4ed01b3882fd5aee6072085b4d2673', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '7129481501bde51cde421266fa427feb71d60e96', class: "top" }, h("button", { key: '9c9b4a36175962ecfd9d4d55315a6f7387dd83fb', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, h("duet-icon", { key: '9d7aeca2c733cbf7493a6baa370734f5bea1d2e4', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'cc5ae783e309097773eba3215e89e77fbeeec5bf' }, this.label.innerHTML), h("button", { key: '664a157c39f96f3ff3a4be09d43165a9399c7e7d', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'e72d12534a4f2fdcbcd81cd611e581e36c47f921', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '16891dafb3ef15b8c555d7a20eb3a3737b6169a0', class: "sticky-header" }, h("slot", { key: 'b852b6aba1b4f0f617a1b58ca4986c3dcd0d1eca', name: "sticky-header" }))), h("div", { key: '1ff351ecda603ac948d65acceaff49feb3c850e2', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'd993b8b1ca9f1dd5246c09d0aa6c1e2af14f8404', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '7548145c9fefcb76a430cc3ab53c4dce08c0e244' }, this.label.innerHTML), h("button", { key: '05f09bf1036ae0db17edd1f0dccbc3e67a0d3e78', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'eb271988b011397d50d77fb303e0902d987ea717', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '14aa2af7d6c1c6671056fed4a92d1982a24da715', class: "sticky-header" }, h("slot", { key: 'ceace8c522d5236bc7814d85aed1fefb88645c63', name: "sticky-header" }))), h("div", { key: 'a21d4a36e5a0d09ec6d2352c78a40ab9b7d26b94', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'f39b7e0202e0b6553dbb402be4678659161d749a' })), h(FocusGuard, { key: '7ea263ade3d868218bdfa507129b238c2caaf8a3', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '59691db3416b43696ca5620275e7be271cc84595' })), h(FocusGuard, { key: 'd1840ad6416502b10cd8bfe89c091c5265fc89ac', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

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: '6731d76d5bb4f77aec9aada9825967e260d0f041' }, h("div", { key: 'd746d29ae7d36c11330934d76cbabc3169bf5e61', class: {
+        return (h(Host, { key: 'b8179a5080947725342d197344710fbb8c99fee2' }, h("div", { key: 'dfb6f63b98b77618b5f556d2008bb2745c5164ac', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '4660cdc322f09987348f760e910e0ae5ae9562e5', 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: '6a31f384af8ec340aa0d26d3fb18efe76855d18b', 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: '54984e4a5f9911c893403034cd705197b05e0a0a', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'e7c0afa8e83039615cd6541c8a96ac4d07227883', class: "label" }, h("slot", { key: '15b1c44212b96cfba8106d79484df27cb6b72d98', name: "label" }), h("duet-icon", { key: 'fdf3569a5ffc27ca16256dbb5ed697dabc6c6084', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'a33d7c18c02689a09b66f6b2ae626ff691a36d64', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '10ffc7f65f631843ec04d4a016061155033d633e', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'de2ae3fe7a4de7974c3b839d245449d8b7268abc', class: "label" }, h("slot", { key: 'e2f3a31a59d5baf185f7a49076b5fa47d2a9eba2', name: "label" }), h("duet-icon", { key: '654ec9b0d065f01e1f144c3de8838ccd9a16a38c', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'e14ff7d4a35724a16e4463d19c7ac7abfa1e2aa7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: 'b187d077c28702f134241dd0d63ca52dedfec7b5' })))));
+            } }, h("slot", { key: 'd2ccb0322e0d7b4a2bb757bd5d23cebfe60db960' })))));
     }
     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: 'b494dd7486aac50ad7c79b76b0476a66fb197a89', class: {
+        return (h(Host, { key: 'd6cd3738f2f7e8184419c36dab8844ba5bbb5e1e', 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: 'f8c4a6b68356300f7738d2c59038d47abdf54124' }, h("div", { key: 'a8aeaf976bec157057a095337bcad89d26eebd8a', class: {
+        return (h(Host, { key: '2bc7c46f85e5bc998bdacbd35c9c1446f69cbafb' }, h("div", { key: '7d7f56f381399e446b907acf07560819c0cbe769', class: {
                 "duet-spinner": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

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

@@ -85,11 +85,11 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: '2ed8b9396a6fc4051299df605b5293b4ad851f10', class: {
+        return (h(Host, { key: '1ca69dd10d6b02ca1861ed79ca6893995846297a', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
                 "duet-m-0": this.margin === "none",
-            } }, h("duet-icon", { key: '01f92fdcfbb79c7bb32ea0dae0251bfad3f8f867', icon: this.getIcon(), size: this.size, margin: "none" })));
+            } }, h("duet-icon", { key: 'fa7ba272523dad56aca0e17ce988da0f737ba2dd', icon: this.getIcon(), size: this.size, margin: "none" })));
     }
     static get is() { return "duet-status-icon"; }
     static get encapsulation() { return "shadow"; }

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: '37dcde2a09c0e543e37af2938511c4e872d5cae3', class: {
+        return (h("div", { key: '410f3ba5a4c08c17e565dca5914c6397a8b4a9bb', 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: '60cc26eaba669788bb129ee58c8396455bcbe98e', 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: 'd8bf199c1d4708327bc68f2ca7ca34881e606d9d', "aria-hidden": "true" }, h("div", { key: '85d3a85ac2a10d5d890752aca579d63d307b2b40', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '601144eff6f14bb9a339f50496acd851426e42f4', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'cbee8cd26ef8ff6a7da62b4103ca125f2d507563', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '98021d88fc8448ed6f6a74b933c7bc0fd8f26ec5' }, h("duet-heading", { key: 'fd4de9e77b6d8bc773ca4431344cf97bdfe136be', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '1da55e5c04eca24aa75cc45977ddaa5d0de92020', direction: "horizontal", size: "large" }), h("div", { key: '300dddded08ecc1b218a501076f95f2fd9b8a233', class: "duet-step-heading-slot" }, h("slot", { key: '7a2cabe2f5d9855beb86893c4b9446217ba7725d', name: "heading-content" }))), h("div", { key: 'f1ea6a3b0bc0c6a2572e6912ec674c42432f5f56', class: "duet-step-content-wrapper" }, h("div", { key: '9bd2104be04904785340ecce44e3b91093555aad', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'fa019373955fff315ba8324a011a6cdc64bdadd1' })))));
+            } }, h("div", { key: 'c32f962589b722dd4cdff4570236e5461844d9f2', 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: '534b449b0149f14c71c8a255e97f438f1fb534b3', "aria-hidden": "true" }, h("div", { key: '83026292f5ad4c4fd49cfb3eabd2788af1fd4780', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '40bd8de5bb73973ce94b92840593dfa62db9652d', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'e821c6539548079ca25a9bf9fb2a23c3514933de', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: 'a30345d3bc25835f4f949a35cc5f904dddd23d89' }, h("duet-heading", { key: '5bff2f4ba60be7e1fc9055a5768e9833185ab3aa', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '975fd245cc2446e5e5512e14d2321c52e14fb956', direction: "horizontal", size: "large" }), h("div", { key: '3fcc998e525a6466b3e3145ff3761785e90ec3b8', class: "duet-step-heading-slot" }, h("slot", { key: 'e9d50a730784ed9bd962dca7d877ad087fa4609d', name: "heading-content" }))), h("div", { key: '55ac85266d0d99b8395ea4767eb4ac2286803ec5', class: "duet-step-content-wrapper" }, h("div", { key: 'aba80e085e8739ac8c87c4e1ead392b3d1965017', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'e45dc448e50cc6a3a025de1c1869e1dca0591caa' })))));
     }
     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: '6f441de1f6aa9336d4981a9727b0a5b79267ce06', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'bb37128420e9ec5b31375d46408fa6b201c23a73', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'e39cc64f5bcac69f03283de656b47440b8cd6141', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: '747ef3274ad5dda720a3632086ae1b240e6f30f8' }))));
+        return (h(Host, { key: 'ad7496622f65e7ea3efc00cd1d5cde5f83bee8de', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '6a48c6be81c8b46c82d4b3004b28ce5c7b50c345', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'b121f34975d226d3dc3bfc78c30507d0d8ad359f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: '6cc98ee6e6fde161ec959cceee943d8e13e9054d' }))));
     }
     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: 'f4def1bd42afddbfd791262c81fa4cb6b53aa0bf' }, h("nav", { key: '0c99d3101944026ef30ecb17cc15036c7a49f69f', class: {
+        return (h(Host, { key: '816ecf621e240e3cf6a2288aab18767528ef10b0' }, h("nav", { key: 'aee92ffb8c65faaa013ddfdf10c40ec4f467030f', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'b06a70d212f178d944b069955af8d3c3eaf2dcd3', 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: 'c6d43080e7c320cfb23321f04aaf242a00d08a0d', 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: '7915c6c4efaaec0625dad9fc232fe7037bc136ff', class: "label" }, h("slot", { key: '3ba013e59bd0e392c3648611266ecbb405d4a831', name: "label" }), h("duet-icon", { key: '72d21eb9586a7a21b50db832903217462dc7b24d', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'f8e0d135231fc961dd80f795c1d82d9d7906da6e', class: {
+            }, onClick: this.onClick }, h("span", { key: '724fe14b534bb7275701c6ee57f6eba306ed21ce', class: "label" }, h("slot", { key: '1e761ff10257510e5a44b581d3c6bbae8e3fd1f2', name: "label" }), h("duet-icon", { key: 'ca72a4a98873e59b5dfd602408c05913de7b7070', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'beed4388ee3ff813baa6c1fe93c8bfddb6c7529f', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '6975ea468c45d4be064e96565773c0266b38e7ab', 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: 'e294e75a427015c1cbbde13893a39ea85f1f7835', 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: '0c037e643939277845dd75e4f98eb83c2ed41f99', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'c0d94264c8cd5824c1c45df63bf5eb67897e2700' }), h("div", { key: '64bcd133e88697445e17abbf4dabf2ea4ed40fd0', class: "list-padding" }))), h("duet-overlay", { key: 'dedf8c34bcca605bb8ba3895930d66c7bfaafe6a', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '99cf2dbeac35681c212fa459d303036f74c6e66e', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'fb30bed27a6b2d3dc7289043e4814b5aa076e210' }), h("div", { key: '09ccbcb5e99b2579ea961dddbdda729420d0f43f', class: "list-padding" }))), h("duet-overlay", { key: 'c95ed4b5f791d6c6cab6ade6fb4269a00dc4af1d', "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: 'bcb3f683de71c0bc8b9c87f8c3bc7ef5600c6fa0', role: "listitem" }, h("div", { key: 'ec440dbd58f7aa8a152d1e6517801ffffb4795a6', class: {
+        return (h(Host, { key: 'b51e8416e33625711e381e53bec0724889b3d4a1', role: "listitem" }, h("div", { key: '44c9b2f36c4579b75175240b1ab037d48fabed5d', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: 'f67b293a2fd28a3c0e3e062461de2890beb6f174', 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: '9142786ada48453874be341a2409d16c83e91347', 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: '10bfe310933a9f989ae31ded0cbced2a0a14db8a', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '3c53621e7555e4df6a62ac41cfacb19dbc2630b9', class: "label" }, h("span", { key: '60cd09a846746be5d50c9851d1a2d3d66a61682e', class: "label-text" }, h("slot", { key: '0a0ad898618514d5b4f510d6be7e3c0074a86af1', name: "label" })), h("duet-icon", { key: '69a6d28eba4f72b06c035cd529553ae16da14253', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f5889cb60d5f244d99e8e5cce9486388166e4034', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'e0dba09b06d16f60131bf1ac7744e7867e77a9c3', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'da38470a493fbbae28f1e9ab1217f63fa8106937', class: "label" }, h("span", { key: '64980453db932e88d8dfe8f88f28e1aa5eb14c66', class: "label-text" }, h("slot", { key: 'f8dc584414a25bd7ab46519ebc01e0b9f1892db0', name: "label" })), h("duet-icon", { key: '1ede41bfa5de2236c4f2d1dbfc3c470864710fca', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '18aec6f6c56e6b784c2e74fe652e9cce530b675f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '48c26d5ac4af48cc2a0811966278d49b315723f3' })))));
+            } }, h("slot", { key: '8dc7c90b3bf98db886ad26d888b54899eb399a29' })))));
     }
     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: '4576334bddababcad4705978843a1ae08e34e72d' }, h("a", { key: '8e115648050ee9bde7d9fffb9dc3b895b0c46cc3', class: {
+        return (h(Host, { key: '46fc9ecd76bd0715d98c22b8e9b0fc81fa13b151' }, h("a", { key: '3bd490d3d6485f2a2aa481cbcd294c76f18670ec', 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: '3cb691c70dea145bcd829655518d1e2da8ec4a48', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'd68d5f69f86de6ea467ea7acd2e6901950846c4c', class: "label-container" }, h("span", { key: '4d40b23d4ca997fa9261b19f36934c678f0f67d6', class: "label" }, h("slot", { key: 'adf85ab136a5ddbac43131933ebd5863274562e7' })), this.caret && h("duet-icon", { key: 'c766790219038e9fc9b8bfe3454f5641020965ac', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '75759a4e4dd6032b73cf12fa7630b33f995e7499', 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: 'ad47b72b28599ba487f8c98ed70b01514e3e1086', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'df8c68c67625c6c7c4ef9363225bdddc13946d6f', class: "label-container" }, h("span", { key: '2befba9fc4edcedfc11cd3554439fa795d8baaf3', class: "label" }, h("slot", { key: '0ff3ae9e9ea866cc6bf02cf51ef3c157101164b5' })), this.caret && h("duet-icon", { key: '5206b89fd11d42de2c5072746c8a0de5d01e8236', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '4ef4476f43c827135b27937299b87b29e8026412', 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: 'de4d2352d792c0adffd35bc86e9450b970bf8b0b', role: "listitem" }, h(TagName, { key: 'd07f89e5b67f9898e7ad18385c29956226bbd875', 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: '0355e7d2be9da67841b162371e4c22bed4a58bf8', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'c6cb759071a39f0ef8d86fcc657aabc6c174f6a8', class: "label" }, h("span", { key: '35b683122ff7739979a3c10ea756df2e0becccfe', class: "label-text" }, h("slot", { key: '530d2eec823596ae1a6c9148684a500bd48ebfae' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '95d91c2031615a6960ae2d476a92034f37cd5e7f', class: {
+        return (h(Host, { key: 'a6d866946b9ba85265cc7df4d98403697d619606', role: "listitem" }, h(TagName, { key: '32a6f64535cfb4468e4df774b840203265d183d8', 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: '49ecd11776943249f4563c1131a9f76dff3914e9', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'b129913e594e27a973bd72edcb1cde1eb5cb3e1e', class: "label" }, h("span", { key: '0f6a39e368b2e40b6ba401586fc4daa9442cf8f0', class: "label-text" }, h("slot", { key: '00bfacd528e419c0e68e6d9c8040d36f0cc0b71c' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'e44a9f410642e5acd3f79250bf80844393789527', 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: 'f21f33d16d3f1e5435db17e9cd84b5c6be8b9a27', role: "listitem" }, h("a", { key: 'd0a5cbf0af61c71728e231fe37161b3771d32239', 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: '62d39b5711cb99bbe1e6a5116d365926cbb7a00e', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '0c4fad2999da91f0c87910c43f30c028482581ca', class: "label" }, h("slot", { key: '9f803721b07edf060c3a0c3c65190f8205ab0422' })))));
+        return (h(Host, { key: '61a7e1fc2b326138c7cfc134690d1c4f190fe946', role: "listitem" }, h("a", { key: 'd5322e03b0df04c31a0937d405679c24674b35d6', 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: '5f5def1255fed4d06a745760805a4d5305165c2e', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '5c0f68184f743f8252c0a05efa52fbd7b6bcd5c0', class: "label" }, h("slot", { key: 'd372e57f8d53c24773f8f0583e73194abeab8601' })))));
     }
     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: '91c006415c8db98625168cc1509f085f9f25424e', ref: element => {
+        return (h("div", { key: '52685c26793f37570debd51c11fd6d9c0eacb7a1', 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: 'cbcb9eb3c000e67f2aa896af7159101672c5c8af' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'bc08f9d93e9cb6653bfb2a97f5cc5fb9f67a1fe9' })));
     }
     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: '417e3a0eb99cdf3d6df636586be7435cad2144ac', class: {
+        return (h("div", { key: '494ac1333a13dd37b390174ca79a3a90e89f13d0', 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: 'da12d48bcbb77d4e88ca34c63ee54c63db53eacd', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'eb4e340563793bfda1941a66200f6d07929bccb2', 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: '25e346444619db75d262e11a84acdfaaafa2257c', 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: 'fc769c72a4f684dc6f6cf0e893b93215b98b2d87', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'c63f225ca6cd084bb78f4f3bcc046d21c9d47e0a' }))));
+            } }, h("slot", { key: '20db6ecc342cbd347bdf35885289259106a07442' }))));
     }
     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: '1dee35eb36b222e57e85e68f730b6460a8b9e63c', class: {
+        return (h(Host, { key: '5416b5f7a33d4e5c30e826f1f41c03005bf5511b', 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: '933771b95dbc033acc97acf8396d23e2fa5e7651' })));
+            } }, h("slot", { key: '517ff1c0cda9e306cb0ea05f1e56a1d74e9a74d3' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,11 +94,11 @@ export class DuetTeaser {
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'e65b22becf6cc35870584bb5d4984a5c92c52f80' }, h(TagName, { key: '39bab1e7a6e59414e18110a6513634c4da99dbe6', href: this.url, class: {
+        return (h(Host, { key: '2177fb25347d6718b106ee8ae29a47da6ae543b2' }, h(TagName, { key: '4485125a5e29b14c00da4a7ff1ab55ae30ae03fd', href: this.url, class: {
                 "duet-teaser": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-teaser-link": !!this.url,
-            }, ref: element => (this.aOrDivElement = element) }, this.image ? (h("div", { class: "image-wrap" }, h(DuetPicture, Object.assign({}, pictureSource)))) : (this.icon && (h("div", { class: "icon-wrap" }, h("duet-icon", { class: "duet-teaser-icon", shape: "brand", color: this.iconColor, background: this.iconBackground, name: this.icon, margin: "none" })))), h("div", { key: '985108c747576fb8fa5e522402ad6518d471a8c5', class: "duet-teaser-body" }, this.heading && (h("div", { key: '2c49e6b10827a31060a9a0263d20648835008aa0' }, h("slot", { key: '4f4470ff29f50d5b4deaa6b1e28593156c4d5b06', name: "heading" }))), this.meta && (h("duet-paragraph", { key: '86b2aca7b9b6345e14bb0e21d1e92bda158288c4', class: "duet-teaser-meta", margin: "none" }, this.meta)), this.description && h("duet-paragraph", { key: '1a4979c9fcc3e6b75724a8cf031a401d47992d43' }, this.description), !this.url && this.hasLinksSlot && (h("duet-grid", { key: 'f5d445c279ed382840cc879bf84317d329b060a4', direction: "vertical" }, h("slot", { key: '259f34f776ea59e48904321663fd54d864aa4dc0', name: "links" })))))));
+            }, ref: element => (this.aOrDivElement = element) }, this.image ? (h("div", { class: "image-wrap" }, h(DuetPicture, Object.assign({}, pictureSource)))) : (this.icon && (h("div", { class: "icon-wrap" }, h("duet-icon", { class: "duet-teaser-icon", shape: "brand", color: this.iconColor, background: this.iconBackground, name: this.icon, margin: "none" })))), h("div", { key: 'c1bf8197236423d2c89e927609b46bf541f2ff2c', class: "duet-teaser-body" }, this.heading && (h("div", { key: 'f217f4e9e0ef3304743f40e2fff01054ca029f70' }, h("slot", { key: '4a57d8a71a89df56fff5f1be801425a26cac3e54', name: "heading" }))), this.meta && (h("duet-paragraph", { key: 'cacaa63522817218386da1de2ef6ab41dcf7927e', class: "duet-teaser-meta", margin: "none" }, this.meta)), this.description && h("duet-paragraph", { key: '575cb467ffd41ab0a5fb5f71f8995a4a8db15d48' }, this.description), !this.url && this.hasLinksSlot && (h("duet-grid", { key: '02c90e874e6c2b45b5e43194d161b30045effd31', direction: "vertical" }, h("slot", { key: 'fd2c221a55bbb1433355d189632eaf7795576561', name: "links" })))))));
     }
     static get is() { return "duet-teaser"; }
     static get encapsulation() { return "shadow"; }

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

@@ -217,6 +217,10 @@ duet-tooltip,
   color: rgb(8, 42, 77);
   opacity: 1 !important;
 }
+.duet-textarea[readonly] {
+  color: rgb(62, 84, 102) !important;
+  border-color: rgb(212, 223, 229);
+}
 .duet-textarea:hover:not(:disabled):not(:focus) {
   outline: 2px solid;
   outline-color: rgb(127, 150, 165) !important;
@@ -307,6 +311,10 @@ duet-tooltip,
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
+.duet-theme-turva .duet-textarea[readonly] {
+  color: rgb(53, 79, 101) !important;
+  border-color: rgb(212, 221, 226);
+}
 .duet-theme-turva.has-error .duet-textarea-help {
   color: rgb(214, 28, 82);
 }

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

@@ -77,6 +77,11 @@ export class DuetTextarea {
          * technologies.
          */
         this.disabled = false;
+        /**
+         * Makes the textarea component not mutable, meaning the user cannot edit the control.
+         * The user can otherwise interact, e.g. by selecting the content and copying it.
+         */
+        this.readonly = false;
         /**
          * Set whether the textarea is required or not. Please note that this is required for
          * accessible inputs when the user is required to fill them. When using this property
@@ -98,7 +103,8 @@ export class DuetTextarea {
          */
         this.echoPlaceholder = false;
         /**
-         * Display the textarea in error state along with an error message.
+         * Display the textarea in error state along with an error message. If the textarea is disabled
+         * or readonly, the error is ignored.
          */
         this.error = "";
         /**
@@ -234,23 +240,26 @@ export class DuetTextarea {
     async setFocus(options) {
         this.nativeInput.focus(options);
     }
+    get writable() {
+        return !this.disabled && !this.readonly;
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: 'c645b374c5569d125e844312777f69b913951785', class: {
+        return (h(Host, { key: 'f667e15959599e11fba7779a062513b430c237f4', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '5c57fd8c8f91750d834147fa416e8cda82dcf025', class: {
+            } }, h("div", { key: '3017c39ed8485d0c4cd5cbff373e5795b315e239', 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: '7cf923d382d2623fa18ec9ad084275e2b9792ebf', 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: '09a04a79bc4f13351c51ffca8332d863c7d22280', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'f46daf8b99a53de5e5164f0f9f357ae91e1aa586', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'a2b9079234a7ec3b9b793e7912bcd4c8addc9e70', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '7f68db3beca35abb4fb53fa1056d99857e1e8316', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '250b6e1eb6abbb79f71e176c1c241cb1fa3da18f', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'c50e5d4e25d0a499cd6a1bfc03cbc546d92a3b74', 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: '20b668af694a652ea88adc161052fbff65517eb5', alignment: "stretch" }, h("duet-grid-item", { key: 'b795843db0959cc83c8724dbd587debd68f58594', margin: "none", fill: true }, h("div", { key: 'ab3999585663d8d1081fe39b43a35933af7ca9b8', 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: '4ad7dbac61a6398ec4f8459449162d002030f29e' }, this.error))), h("duet-grid-item", { key: '25e2bb115dada7a5b0baaa58efcad756c3cdfc30', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '3e68a56f36758415be927efbc10cf267ec4d414e', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '7af4e00427232548222397a4439f2e71a54ac586', id: this.characterCountId, class: "visually-hidden-counter", "aria-live": "polite" }, this.visuallyHiddenCounterText)))));
+                "has-error": !!this.error && this.writable,
+            } }, h(DuetInternalLabel, { key: 'b62e9c27cf13789036b04f320bda685083796517', 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: '24dcec9860bfc8bbfb0547e924f8d4319cd18064', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '5a197f095df7dd625df5b6f9b0b40a2f8d61bb52', name: "tooltip" }), this.caption && (h("duet-caption", { key: '08a5a97579b9614b1e1e059f0975885c8ff4030f', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '78ece66c1cfdbe778fe3e3293ddf5343842dcc21', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '326ce34b3e142f2a7676067fc13452d02cd63d05', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '994ac4a61ba288bd72d73a504f8a7721fa1c0389', 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, readonly: this.readonly, "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: '0b61766a90b3b6e76cab85dfd55b81cc487e77c9', alignment: "stretch" }, h("duet-grid-item", { key: '9bc9ee00a5268f80e0b9c01cb99099f98ea59fde', margin: "none", fill: true }, h("div", { key: '18eb1c48ea7cf5a44ab21477b6a68bc7b7baccc5', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && this.writable && h("span", { key: 'a76db4119e297a2451e2c6ffa6894cf044a1aeaa' }, this.error))), h("duet-grid-item", { key: '020dc157342b1572a54c82726d88d14ef17c6dcb', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '495d71bfc1a80ce1709014843a81cb2e96fb6021', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: 'b682416e87e7ad792b67cc3b6d754495f94b351f', id: this.characterCountId, class: "visually-hidden-counter", "aria-live": "polite" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -533,6 +542,26 @@ export class DuetTextarea {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the textarea component not mutable, meaning the user cannot edit the control.\nThe user can otherwise interact, e.g. by selecting the content and copying it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "identifier": {
                 "type": "string",
                 "attribute": "identifier",
@@ -803,7 +832,7 @@ export class DuetTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display the textarea in error state along with an error message."
+                    "text": "Display the textarea in error state along with an error message. If the textarea is disabled\nor readonly, the error is ignored."
                 },
                 "getter": false,
                 "setter": false,

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: '8e33f58775179856fa30813d64699b5fd99d8340', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
+        return (h(Host, { key: 'c1f8b026ca2f0eaf39a54127c1f69d22694a46d2', 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: '814cdf2738bbf743e689d706d00999d2476474a9', class: {
+            } }, h("div", { key: '13c89c2abc235e07e99e671d73e4561eb0f83cc8', 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: '48309fafb420e187486b8de7eef212f614008295', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: 'b4f62f86018a7bb7f34a450175ad996c63059ed3', class: "duet-switch" }, h("input", { key: '8c314ffe85e67fa4740ef3bb6357c17e4fc2659a', 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: '6e55a2738a881cf60ab6699e2e8e1fc0026362a3', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: '1ae23364dffc828696a3591fab7e48832a18653a', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: 'a4f566fbcdb66615228cf9fc16056378cc41eda3', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: 'db35c9a6927a435ed193f696e8a775f74b7d47cb', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
+            } }, h(DuetInternalLabel, { key: 'ee03e1def14f4be0d469081e28e6dd34f622ff29', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: '46af0389473f5f8d9f509472b24b92eef985b98e', class: "duet-switch" }, h("input", { key: '864dbbeaffc9cea78be34939de9c6d349c88cae2', 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: '0493bd3ec7da36a97706b3950c28d98b723d1979', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: 'd484ef05401a121a7ed665c35cc466ad06ed933b', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: '489d5f94a8f46f6c1acefece45eda231d9c786c9', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: '7c3d367d72ff5cecae77d9ca0e8a9d5ed43e0a39', "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: 'a4427ddcb41378eb22a7ef7f077c9fdf1d290880' }, h("nav", { key: '255a4f21a692c5a1231d619f33a73bfece27de9c', class: {
+        return (h(Host, { key: 'a37f1935a900c25d98ec68adf41051ba262b8382' }, h("nav", { key: '2902f5f92017c5d24c9d402f1e15a987e015ee39', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'ac3f72269798fe1d29734ed2848149b1f3197815', class: "container" }, h("div", { key: '01fd28d4455b94221b7664475f7f8d948851b1ae', class: "list", role: "list" }, h("slot", { key: '51d7c5144022b4d1e580a9d33e9fff683e06e537', name: "left" })), h("div", { key: '2fd278a57422a9751f84a4faedbb26cfd8a6095c', class: "list", role: "list" }, h("slot", { key: '0e7197b5ed23a575b00e3c5dca361da1b1dfbfb0', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '83f64d72ba0fb5f452c002eaf87c5fe549665730', class: "container" }, h("div", { key: '81ca721a0ef1c7f5251611645bb4bd1bad34c154', class: "list", role: "list" }, h("slot", { key: '67dc75314e0816f603cd8a377641f353d809f35d', name: "left" })), h("div", { key: 'd4d812cb4a537406f4bd1763df1ecb1dbcc4c36d', class: "list", role: "list" }, h("slot", { key: 'fd698d64dcd063a8aac4d85a89100a35108ae52d', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }