@duetds/components 9.13.0 → 9.14.0

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

@@ -456,14 +456,14 @@
 .duet-button.plain.duet-p-0 .duet-button-contents {
   height: auto;
 }
-.duet-button.plain[disabled] {
+.duet-button.plain[disabled], .duet-button.plain[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: transparent !important;
 }
-.duet-theme-turva .duet-button.plain[disabled] {
-  color: transparent !important;
+.duet-theme-turva .duet-button.plain[disabled], .duet-theme-turva .duet-button.plain[disabled]:hover {
+  color: rgb(113, 118, 132) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: rgb(222, 224, 228) !important;
@@ -665,9 +665,11 @@
   color: rgb(255, 255, 255) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain:hover {
-  color: rgba(255, 255, 255, 0.8) !important;
+  color: #8c001e !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled] {
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled]:hover {
+  color: #5f7a8f !important;
+  background: transparent !important;
   border-color: #fbe1d1 !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
@@ -681,6 +683,13 @@
   border-color: #e61740;
   outline-color: #e61740;
 }
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled]:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
+  color: #7891a4 !important;
+  cursor: not-allowed;
+  background: #d4dde2 !important;
+  border-color: #d4dde2 !important;
+  outline-color: #d4dde2 !important;
+}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button-is-loading.default {
   color: #e61740;
 }

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

@@ -173,12 +173,12 @@ export class DuetButton {
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (h("span", { key: 'dad881c4e315cee7e2fa16020ab44f3b8518ce8b', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (h("span", { key: '08d196d1bc190ccb57d8f4961a78e1999f69a6f1', "aria-hidden": "true", class: {
+        const commonChildren = (h("span", { key: '4b6618222c037ec329c118f7ad247b9fd514e878', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color, this.theme) } }, icon && (h("span", { key: '67492c9b50231879ba232f7c6bcdadcb2d219875', "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, h("duet-icon", { key: '24ffeda883152bfe0123a828ed037aa7bdf365aa', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '60cbc950fc893b105e13e98769341697d3065e87', class: "duet-button-contents-slot" }, h("slot", { key: '236c0748e32a96046fe4bf1c79b6822ebf5c0b9d' }))));
+            } }, h("duet-icon", { key: 'fce0630d78df187c2a7f3946ff3d262c43e5ce95', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '34d608211bac6921c4aec51f71a9b33e2ac2b7b0', class: "duet-button-contents-slot" }, h("slot", { key: 'b2478d851993c148be6a83a76f9f725469bc9944' }))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -213,7 +213,7 @@ export class DuetButton {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (h(Host, { key: '2f71565d21679c2161cbebaa8b3bfaa7aa4183a0', class: {
+        return (h(Host, { key: 'c70e2d9cbe884c7b6cc3012721f01ce6d54b4555', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -221,13 +221,13 @@ export class DuetButton {
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
-            } }, h("span", { key: '2a2d449975f67608f602eaca489e4ff865496ed8', onClick: this.handleClick, class: {
+            } }, h("span", { key: 'c8be7792d2ae572befbfbe921a3ec453c073637d', onClick: this.handleClick, class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
-            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { key: 'e27fdd855b9191cdd22c9b74746f3144890d3837', color: "currentColor" })), h("slot", { key: '5f1fec755bfdf56ed261b893fa647308c1e21a7f', name: "proxybutton" })));
+            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { key: 'da956cda627d2afc5084ee69629b54ffabcb672b', color: "currentColor" })), h("slot", { key: '0ead01a475d6242c0049a259f9b9c725830d4b80', name: "proxybutton" })));
     }
     static get is() { return "duet-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: '2d1eadb42a67c31dd1d5e3498f00254e08b9b2cd' }, h("div", { key: '6e5be94e6e61eaf272e52f9de9070f8de6a9484d', class: {
+        return (h(Host, { key: '85f99d167ac281ddceb8a8a69da07d854be973f7' }, h("div", { key: '14ccbc1c5d5f56368fefdcfa8ac2b48f46c3e0b7', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '1652580bcf78ac7c5ddb8b0a254de66725b98e9b', class: "container" }, h("duet-icon", { key: '541cfe32ac9e9155924e22e7bf00850b70b79602', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '59af18b18c95e816e8dc446a3bcbe45f9c13f4fe' }, h("slot", { key: 'f90f9674baa8d9e81c688920babcccc9e3e20468' })), this.hasAuthorSlot && (h("figcaption", { key: 'ee4f1307e15ebfa58d6b7d29a7bdea93b3b5868f', class: "author" }, h("span", { key: 'e6861f2ba21ba016d94cf482d93c614e5433e805' }, "\u2014 "), h("slot", { key: 'c9cede4ee6f69cbf35c591d4c23787ccc7c7c8d1', name: "author" })))))));
+            } }, h("figure", { key: 'fe2a9c932a02907cda19e0f258e36a1c5a83a1bc', class: "container" }, h("duet-icon", { key: 'f9ddcf0c22344b4490cd3433e4d85e644a8b4e63', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '11b22131f070c316b6cadd833f0fb5d12bf0ed4a' }, h("slot", { key: '6448a4a8b760c12a583b4454c183f32c26a8e4cf' })), this.hasAuthorSlot && (h("figcaption", { key: '3d98ce3b4e9a1d81ba99d1c8cbb38eacc91bb2d0', class: "author" }, h("span", { key: '9a8f0ab6cbeba79793fbc1926924e4d4acc3cf5b' }, "\u2014 "), h("slot", { key: '928a1113e8f44b3f6439a9ce1ec5f96771b95270', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -18,11 +18,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '0c46b037eeb1d3a569233716e3931bb9e6d36a3b', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '77315f3c12b6d27a6e2736eac734c6830704d15a', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '1b895cb3066e53481dae93943c90c4fa57fa1f3d', class: {
+        return (h(Host, { key: '8f8df4562a1d37c1e3ced47dace2f8ca487a9f73', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'b803f9fe255ac6166546a8a0398b4958d46cd0df', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'a284f559c645796efaa1fd9e74a7d1544154b26f', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '2edba7cb3c44eed2b9af34c9a1afd893cadc3bfa', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: 'e17c92da194bbedbd6f4159efabad9321c52fa49', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -45,10 +45,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '27e103c0c5049f7fab515607764a54b61951c1e0', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'c574b5e46c7fa008821587bb36154641b390b903', class: {
+        return (h(Host, { key: 'cc92ac8c254dd4d8059e41dc84a0885936486939', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '95dcbf611c7ffa2e00d4e3413b4e5d4ef76007d4', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'ad527316cf8b63feb34bd4dd79f77324b7f48c80' }, this.name && (h("duet-heading", { key: '6774b39b0bbd63f84d262fcf3f2ecad255664ce0', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'f8dcb174650b2bc6f9ab36f8995c9e4629cd4cb7', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '73e0f30a03c566d15e338a87506fcf537f8c5cfd', class: "email" }, h("duet-icon", { key: '362a6a97716c3a14aee0aa4f922b46752a512fe0', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '86f261b33c3199a7e02d697417f835d70f3300fa', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fefe6fcb46d1113762849f95e2dcb7c4625d2472', class: "phone" }, h("duet-icon", { key: '55a47952ffee9a4d97c714aa749219bc6d7aa2b8', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '618acf848c98219d2a05233a8f072401a33c5507', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'bc881ffff92c8433241d886ebd054090356ffece', class: "call-to-action" }, h("duet-button", { key: '8147b7ed59d0c12d235059e6a1d1ec7551f1e184', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '1d06de992fe79882232166faca835f6468ce796f' }), h("slot", { key: 'ade5d1b926723e45fc1ff45faeef9fa14bd5af56' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'cb2b61b56ea9cbfd80aec1c7c280cc35b7704306' }, this.name && (h("duet-heading", { key: 'd7ce3e63272101a9f8a4cd7d3f259a4ffdbe746d', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'aea14ddd85a3568d5b77a49e56df6ac76540a3a9', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '323330c4a1a8c188827cd7eeaf9e215706b23b62', class: "email" }, h("duet-icon", { key: '33ae4ab4b3b810d5f48494adad568458f627b07a', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '84ce51f0721ede904044fee80b8cbf86e66b1ec8', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '7c63f2689781c66d80d32415cf200bd968fe347c', class: "phone" }, h("duet-icon", { key: '6a56352c7a808bedf087a8b60edd2579dbddef4b', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b2b78cbff49648d799b020ee52ce54f412285b13', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '9a24e774e65e1f9cdd587f8ccfd8a3bf6ac57e10', class: "call-to-action" }, h("duet-button", { key: '7c7e4b45dc28293a9f44a71d07ad4c6a6882364a', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '85e9b10271e93b14e8e5a2821d72e7ee5ff4f194' }), h("slot", { key: 'ba84e396a9e346ff2f9cbc7c9dd66d4eefdbe2d7' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,20 +49,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '52a7af4072f1687d77b6554d57ec17a5d55aaff2', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '951a9bd1cd7a9c05946b8ddeef1d070643bc4c4e', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'faf60f2966a89f4867cf37db394585f73fff686e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'f020b6ec6801a8b83c9a5bc93a43d7a35d7506ce', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '83afcaa840a3cf7b369c9e42e880e73eabacb979', id: this.labelId }, h(this.labelHeadingLevel, { key: 'f4d98ebe02e7fe0b96a69c9ed77c720b28286a65' }, this.label), this.caption && h("span", { key: '36254f57334b8778f314d1e93769d26e141cf6f3' }, this.caption)), h("div", { key: '311ebc92a4464e106b361afe19c9d000b33bd115', class: {
+            } }, h("legend", { key: '66b5ccbde158c98f27fbc6a46a4e6a6df23ff898', id: this.labelId }, h(this.labelHeadingLevel, { key: '45be33f32735066278ab2b9f3b809014d0f9676b' }, this.label), this.caption && h("span", { key: 'e544fb508d9001319a7f3a4f3b4b5ec8166f8025' }, this.caption)), h("div", { key: 'f0ad41b915201af1a2f9d95e9f9829d0bfdae2e6', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'c4b624b7ea3358f3158d1460e771f0a024484290', class: "duet-fieldset-label" }, h("span", { key: '8861094bcd63579364449bcc7b8773b8e7c1b3e0', "aria-hidden": "true" }, this.label), h("slot", { key: '36eedc6038045711a0ad90f602029a48dc71f37b', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '74d7fcb0d6f43b96de7dfd358c3f06223b4aa084', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'd04e90dd750eb4c0ef1950901f47cbf4810a0983', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'e972c7e0393ebe8469916c5aaeb037cae5c52ff0' }), h("span", { key: '874c61a83a132e10b2dbc694f057d9dff7dbb982', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'e52f94e350f68530fbcb9f6ce204a567a82fe376', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '5a632f1718ae040c523fec5d67abe8b7150c62a6', class: "duet-fieldset-label" }, h("span", { key: '96af5bd097ce6c732cabfeeed24ad70acbc0242f', "aria-hidden": "true" }, this.label), h("slot", { key: 'a9d4abbfbc6586fc072f15d0ada1e0678581eea3', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '09060f463be57b59b6a313dbf51961197a567f40', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'd5f8281d4970d4e26290d3163188afea4b286694', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '3e8180e636e2ec3000f4d21dd9ee50dc12f396f6' }), h("span", { key: 'fc0dc472b4ef27d06a1272f621c936f14ffa1de4', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '8586a6c9b1a32ed3e780a0d7233664bce741c3b6', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,6 +15,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
+import { postfixTheme } from "../../utils/token-utils";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
 import { DuetHeaderIcon } from "./duet-header-icon";
@@ -429,7 +430,7 @@ export class DuetHeader {
         const skipToLabel = () => this.skipToId ? (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)) : null;
         const logo = () => (h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
         const largeLogo = () => (h("duet-logo", { href: this.logoHref, size: "large", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-        const contactDropdown = () => this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" }, item.label, Build.isBrowser && item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-header-link-external" }, h("duet-icon", { name: "action-new-window-small", size: "xx-small", margin: "none", color: this.theme === "turva" ? "primary-turva" : "primary" }))))))))) : null;
+        const contactDropdown = () => this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" }, item.label, Build.isBrowser && item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-header-link-external" }, h("duet-icon", { name: "action-new-window-small", size: "xx-small", margin: "none", color: postfixTheme("primary", this.theme) }))))))))) : null;
         const languageDropdown = () => this.language && this.processedLanguageItems ? (h(DuetHeaderDropdown, { id: "duet-header-language", label: this.language, icon: languageIcon.svg, accessibleText: `${changeLanguage}${this.hasLanguageChanged ? `, ${activeLanguage}` : ""}`, active: this.isLanguageOpen, isOpen: this.isLanguageOpen, badge: false, toggleRef: el => (this.languageItemsButtonEl = el), itemsRef: el => (this.languageItemsEl = el), onToggle: event => this.toggleMenu(event, "language") }, this.processedLanguageItems.map(item => (h("a", { class: { active: this.language === item.country }, "aria-selected": this.language === item.country, role: "menuitem", id: item.id, lang: item.country, href: item.href || "#", onClick: event => this.handleLanguageClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))))) : null;
         const processedUserWithLink = () => this.processedUser && this.processedUser.href ? (h("a", { href: this.processedUser.href || "#", id: this.processedUser.id, class: "duet-header-user duet-header-button", onClick: this.handleUserClick }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
         const processedUserWithoutLink = () => this.processedUser && !this.processedUser.href ? (h("span", { id: this.processedUser.id, class: "duet-header-user duet-header-button duet-header-no-action" }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
@@ -443,7 +444,7 @@ export class DuetHeader {
                     "duet-theme-turva": this.theme === "turva",
                     "duet-header-back": true,
                     "duet-header-inactive": true,
-                }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("duet-button", { url: this.processedBack.href, id: this.processedBack.id, theme: this.theme, variation: "plain", color: this.theme === "turva" ? "secondary-turva" : "secondary", icon: "navigation-arrow-left", iconSize: "large", onClick: this.handleBackClick }, this.processedBack.label), logo(), h("slot", { name: "logo-utility" }))))));
+                }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("duet-button", { url: this.processedBack.href, id: this.processedBack.id, theme: this.theme, variation: "plain", color: postfixTheme("secondary", this.theme), icon: "navigation-arrow-left", iconSize: "large", onClick: this.handleBackClick }, this.processedBack.label), logo(), h("slot", { name: "logo-utility" }))))));
         }
         const itemsHaveSubItems = this.processedItems && this.processedItems.some(item => item.items && item.items.length > 0);
         const isSecondLevelActive = this.processedItems &&

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

@@ -102,11 +102,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '94bf4741af1d392b8fe4900a1e664e340f3fee89', class: {
+        return (h(Host, { key: 'cbb8e9ecd29edef7aada30fcbfde72cf18a5a15c', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'f53d65724789fb4b1c2dc689a8b754870c082094', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '49a62f09762e014cabe70185e4dd3d351a278d4e', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -115,7 +115,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: 'ee9df8b00f92eab8dc364e15db86d954a936e15b', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: 'c4d3ca6e54186214e4e7f85537357fa8abc2e778', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class DuetLabel {
         if (Build.isServer) {
             return;
         }
-        const color = getColorByName(this.color);
+        const color = getColorByName(this.color, this.theme);
         return (h(Host, { class: {
                 "duet-label": true,
                 "duet-label-small": this.size === "small",

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

@@ -120,12 +120,13 @@ export class DuetLink {
      * Always the last one in the class.
      */
     render() {
-        const Tag = !this.url ? "button" : "a";
+        const Tag = !this.url && this.variation !== "default" ? "button" : "a";
+        const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: 'cd7310c88a581cfb5afd755bc4cd1b03f68c67d2', class: {
+        return (h(Host, { key: 'd248d82ba7bfbff36991e0556e609b323b6014c6', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'fb5d0c7cdc5bfe931be67c3a685934d5f2f979b7', href: this.url, class: {
+            } }, h(Tag, { key: '2ae7983d8583c570630c527645ff52c3ddeba010', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -136,7 +137,7 @@ export class DuetLink {
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.ariaLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.ariaLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined, role: role }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '99e9fde88b277b57fe0eb123a4a9393665fc5c3b', class: {
+        return (h(Host, { key: '734a0dd51a59bbd182a84e31cec8c847bd9b370c', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
@@ -29,7 +29,7 @@ export class DuetListItem {
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: 'd28e5c24d737ac46d7b11a0babf2b9842cbe60a5' }, h("slot", { key: '197933a372139678a7e2e5cb5d78412e5d49835d', name: "label" })), h("dd", { key: 'ba1679ecc75e002e8fe7038d4c0ca97ca19e64aa' }, h("slot", { key: '9dbe5076b03b9791f55c9172609a42f050931c1a', name: "value" }))));
+            } }, h("dt", { key: '59e34a2877b7e9c431591276bb3f374e7af6b466' }, h("slot", { key: 'fd6b41b97d6e20e053e3f0f4bfec3f4263819aae', name: "label" })), h("dd", { key: '97aed5f53aa1668d3bae6f2e979e6ed4d99c2026' }, h("slot", { key: 'b89a250df02b8731d5f736da444873b8a257a39a', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2df6c1b32a0a028fd5a562baa4733c2dfef93af6', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '364c82e9d7ef3b5aed9f7df9608e234f474834cd', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: 'b43562922266653eeb9879dd3eda29b8a5a1b04c', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '29c67b30de26740dec3dac49d2c14a2ed6059270', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: 'a143660e0d58efd3eea99181d39e183c2ad2cffe', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '121e0ad7aeb96564c2bbdf6d07c05b4502532eac' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '9e4a9f1891791aa2bce3c66e7a6b0fce95e247f4', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '11d9a8886ba0e00caea9ac34e68454ada2e2582d' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '50016c8e96de112a895ab6c1a619cd51db1a1144', role: "listitem" }, h("div", { key: '84f1d55a04eb2ce6da85eaa3a2098709d72f904a', class: {
+        return (h(Host, { key: '686fce2ec763461a60c924fc09846f5a54138106', role: "listitem" }, h("div", { key: 'eefdc59f23daad325ab0dce1113fb862ad4ee5cf', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: '635deadc4d4430289b7b0b9457d621caef017ee8', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'baee9aee708d71ee63326c30a8f871a73eb2297e', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '199fc78e9de9a2411dbdcac2a7cf3cdd7741896c', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '47bf8dee8211ea4b73157c3ff6abb4d1765af81d', class: "label" }, h("slot", { key: 'cf7592834315d69ab2606208943b57c814c364df', name: "label" }), h("duet-icon", { key: '59f13d4cd703bb83c454fe4772beaceecff32186', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ec6ee4c08d94947327d1414068ec363843d4abd7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'cace1bca4eb588cdbd321b82059fefc9adbc8c47', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '58257618f35379178d9c22a95ed14501fba88154', class: "label" }, h("slot", { key: '57eb7d37a9d7c02e1d29b97e9140f2bab43a767a', name: "label" }), h("duet-icon", { key: 'f11313315fb6e2aad23163bcb58c5c06f0a1e2af', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '9d6bc3e367dca79313d11178ee788a3407d03ec7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'e5381a251537978629b818d3771f648122b39968' })))));
+            } }, h("slot", { key: '9ff49f8c44510abf631a06bcb4b690058a3840ed' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '586e3ed079d09bf899c1f02c3799e1d46f60bbef' }, h("a", { key: '4480061d9f4de3372052169867f6694c272498ff', class: {
+        return (h(Host, { key: 'f77b08c5717947e146d8d67fdc55fefc66fce761' }, h("a", { key: 'b9a4069fc0b35e532944250e4d715984973ba085', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '3dcfc8679e4a1454f6a50efb8aa277ad22faabff', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'c0d05484db5c3de1e32454f3c2025797e240bfcc' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'fa9e331e3d9d8cc74c4fd5f7471e607e058fcf53', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '64c5c1d666ded1b933657386f8eec8fb4068fe84' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,11 +48,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'f8206907f5f09a383f7a11536920b76490ac0eb4', role: "listitem" }, h(TagName, { key: '11894268ceca0e4efac53ea2bb9eb1cf61c84989', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '135b92b36c52ad014567c93c0bfacff2001f16ef', role: "listitem" }, h(TagName, { key: 'd8772442ee0a49f7c300c398ef4021acf0fb74f0', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, 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("duet-icon", { key: 'e7988c04b52df45cd3976e8f1532cad225b0b6ca', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'fbbf9404fa7b6d949c7d89bb478957eff14da090' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c2c2f060f59df74561faba1bd596fa43caaa54a7', 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("duet-icon", { key: '31ac80c4f12447cadcd0def7a2941a98d063a1cc', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '1f9e4b935f68d57288190e3572dabe90c2c49efb' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '24c559a7d56a2adce2fc4aa7d00c2eb5682c2c8e', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5397f75d25382c49004777cc9673b92eb4ebb3c5', role: "listitem" }, h("a", { key: 'd5adf4f588f0108f4bfa82329e5499597e2efbae', class: {
+        return (h(Host, { key: '27e73349cd24930dd1d7ddee302de2260471c5a8', role: "listitem" }, h("a", { key: '524e83c821e67703be8ec2cdb09e937d04202ff2', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '49866f87807a448bec494ece51eac8ba7cb525cf', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'e566b40e827773a58939b25a6f85b69b16aeb59b' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'e85b83e58a78898ca57f6db72178915e4cad29f5', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '11758cbe02d818cb5f5f7af2a8832d1712c99fa5' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,6 +10,7 @@ import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
 import { Teleport } from "../../utils/teleport";
+import { postfixTheme } from "../../utils/token-utils";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
@@ -64,6 +65,8 @@ export class DuetModal {
         this.color = "";
         this.active = false;
         this.closeOnBlur = false;
+        this.focusElementOnClose = undefined;
+        this.accessibleAnnounceChanges = undefined;
     }
     openChanged() {
         if (this.open) {
@@ -110,9 +113,18 @@ export class DuetModal {
             enableBodyScroll(this.variation === "slide-up" ? this.modalContentEl : this.modalEl);
             this.duetClose.emit();
             this.teleport.removeInertFromSiblings();
-            setTimeout(() => {
-                focusElement(this.focusedElBeforeOpen);
-            }, TRANSITION_MS);
+            if (this.focusElementOnClose !== "") {
+                setTimeout(() => {
+                    let focusEl = this.focusedElBeforeOpen;
+                    if (typeof this.focusElementOnClose === "string") {
+                        focusEl = document.getElementById(this.focusElementOnClose) || focusEl;
+                    }
+                    else {
+                        focusEl = this.focusElementOnClose || focusEl;
+                    }
+                    focusElement(focusEl);
+                }, TRANSITION_MS);
+            }
             if (this.isAndroidDevice) {
                 window.removeEventListener("resize", this.handleAndroidResizeEvents);
             }
@@ -186,6 +198,12 @@ export class DuetModal {
     async hide() {
         this.open = false;
     }
+    /**
+     * Set focus on the close button of the modal.
+     */
+    async focusCloseButton() {
+        this.buttonEl.setFocus();
+    }
     /**
      * Scolls the top of the modal's content into view
      *
@@ -247,20 +265,16 @@ export class DuetModal {
      */
     render() {
         var _a, _b;
-        let iconColor = "primary";
-        let closeColor = "secondary";
-        const closingButton = (h("div", { key: 'ce9896186ba856d40dd3394fdf46442a8e8e5553', class: "duet-modal-close" }, h("duet-button", { key: '5332e22f54058adb3f1e0be19e4d8b273520dcee', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        if (this.theme === "turva") {
-            iconColor = "primary-turva";
-            closeColor = "secondary-turva";
-        }
-        return (h("div", { key: 'b56533d39c5b27cb1dc9ed8080755b3b51ce23e5', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        const iconColor = postfixTheme("primary", this.theme);
+        const closeColor = postfixTheme("secondary", this.theme);
+        const closingButton = (h("div", { key: '9de636719074c96f49913c1a19b33329ae39a3a0', class: "duet-modal-close" }, h("duet-button", { key: '1852a8322aaeb49c937cfd4b4d80d61073f12f96', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        return (h("div", { key: '4c602c318db94b02ca730640b8c0c6fc7eb96453', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: '286c5c53a17a3e252b228321e9e59101906907ae', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '52169517df842ed7d492d8c16e924921ba42a920', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: 'c70e730388bdfa452ab51fb810304ba004022885', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'ceae3fcf909fdfa380eaddc2f8c9ac2637fc8810', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -271,18 +285,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'e02af6a6579d010b7d51c34ed6943294d8dfe91c', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: 'c0559f2b2d236a3e0fd339cd65900d400547fb70', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '47f10ec419e39cfb0d830e3279e0fcd3e12b2797' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '22c96515336e07fc86522c732ea3d524d3f68912', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '81664165163cd30e192906cb50bb71a4906256ba' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '92c81c3e5545b4a08b93b3174a888cc42837f2ac', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: '4e81ed660762a097622df196d6d6a483a2b77f37', class: "duet-modal-header" }, h("span", { key: '8ed800e79454c753477e8ae1d534166e9be59458', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'a5601afb68902b31c191780f3b62c9552a93de59', name: "top" })), this.icon && h("duet-icon", { key: 'c27ef856d2e6f99c48c67c95461b23bf7db6b5e7', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'b098a4a25b613306cefa9e3a1a6492ba9325edf0', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '255372c153a0c7eb5d5dfc0c6ad5584fdf8a2ec4', class: "duet-modal-spinner" }, h("duet-spinner", { key: '4600cd8a7f2cb26a49ba884afc47f46ab9754297', size: "large", color: "primary" }))), h("div", { key: '591d3064c5d4a8c174b3c61fe8eb71e23ffa3c21', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '7df11db97dae7c07cceb5534caefacb98b4677e9' })))))));
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '72936aa2c2d2551e34b2c2d7344f666d49c3d0f4', class: "duet-modal-header" }, h("span", { key: '30ac91712c2d7065901679fcf1cd5cb0191cbb11', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'c7e4bd42dfac73ebdfcf98f9d16438c14945d30b', name: "top" })), this.icon && h("duet-icon", { key: '3664c556ad580c917e80e796df4236f89134ab9d', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'd77b16d2577ce36f4e135790a7f49d8a2b17096c', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'ed0fa900e15be0fef3166e61f2f7c860dab067f0', class: "duet-modal-spinner" }, h("duet-spinner", { key: '1d15d8e837273755c1c6242098e198f51c1cda90', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '4d06b9164f277a7cc586a6b754429764cccb1f2e', "aria-live": this.variation === "loader"
+                ? "assertive"
+                : this.accessibleAnnounceChanges === "body"
+                    ? "polite"
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '520b8542f921248916d3470204ce4ee2533da5ee' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -739,6 +757,54 @@ export class DuetModal {
                 "attribute": "close-on-blur",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "focusElementOnClose": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FocusableComponent | HTMLElement | string",
+                    "resolved": "FocusableComponent | HTMLElement | string",
+                    "references": {
+                        "FocusableComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::FocusableComponent"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the\nelement as a string. Use empty string to disable focus moving on close - do this if after closing there is\nanother element that automatically gets the focus or you handle focusing manually."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "focus-element-on-close",
+                "reflect": false
+            },
+            "accessibleAnnounceChanges": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"all\" | \"heading\" | \"body\"",
+                    "resolved": "\"all\" | \"body\" | \"heading\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes either the entire modal (\"all\"), headign and body content (\"heading\"), or just its body content (\"body\")\nan aria-live region, so that changes are announced by the screen readers. Do not use with loader variation,\nas it handles aria-live separately."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-announce-changes",
+                "reflect": false
             }
         };
     }
@@ -852,6 +918,23 @@ export class DuetModal {
                     "tags": []
                 }
             },
+            "focusCloseButton": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set focus on the close button of the modal.",
+                    "tags": []
+                }
+            },
             "scrollToTop": {
                 "complexType": {
                     "signature": "(smooth?: boolean) => Promise<void>",