@duetds/components 9.13.0 → 9.15.0

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -303,12 +303,12 @@
   background: rgb(255, 241, 241) !important;
   box-shadow: 0 0 0 1px #171c3a !important;
 }
-[aria-pressed=true] .duet-date-table-button, :focus .duet-date-table-button {
+.selected .duet-date-table-button, :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
   outline: 0;
 }
-.duet-theme-turva [aria-pressed=true] .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
+.duet-theme-turva .selected .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
 }

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: 'b8619c958091052111b38b30a4b2d21aba5aa128', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '2abbbe4d836d366658e307ae8959e38fbba7f809', "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: '971a82ae56dc2d3b312222d7690903a1561b573b', id: this.labelId }, h(this.labelHeadingLevel, { key: '01a0d519b11e5255c9dceb12ed346ee2a69a5988' }, this.label), this.caption && h("span", { key: 'bcd38310da2d41495e5a0a9f14397277f9c19518' }, this.caption)), h("div", { key: '917f12cc08216b73edb5d390d2adb4dc60e67c83', 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: 'bb9869ccdd739a3e16319bfc92153073dd2b924a', class: "duet-fieldset-label" }, h("span", { key: '700fd555d3c6725de4a81d5a8be5eea99d571c31', "aria-hidden": "true" }, this.label), h("slot", { key: 'fa5a11572a5a47c5f50358c0382913c347557fd7', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1d693a77fbac816f444ac82b84cadf53d13f99b5', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '9982e1b3a570edb5a2505edca6ef1a6ca074c226', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'e4ea0a8b3b0089a3a2aba2576b218f4f28f6ddc1' }), h("span", { key: '610ca7a9f4159cf2e5b39618deec8c6d3ce18f5e', 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: '67546da26bbd68b8b47d70c4dd5da77a4d144b2b', 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-heading/duet-heading.css

@@ -269,5 +269,6 @@
 }
 
 :host(.duet-theme-turva2) .duet-heading.duet-theme-turva {
+  font-style: normal !important;
   color: #172a3b;
 }

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

@@ -1778,6 +1778,101 @@ duet-heading + duet-button {
 :host(.duet-theme-turva2) .duet-hero.duet-hero-gray.duet-theme-turva {
   background: #f5f6f7;
 }
+:host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+  margin-bottom: 2rem;
+}
+@media (min-width: 22.5em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 2rem;
+  }
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 4rem;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 6rem;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 7rem;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 8rem;
+  }
+}
+@media (min-width: 106.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-botton: 9rem;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .background-area .brand-shape, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .background-area .brand-shape {
+  background-color: rgb(255, 255, 255);
+  border-radius: 48px;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .background-mask {
+  background-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-image {
+  border-radius: 26px;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-image::after {
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22530%22%20height%3D%22136%22%20viewBox%3D%220%200%20530%20136%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M530%2018.0108V320.699H0V11.2176C0%202.8484%208.16439%20-2.58266%2015.0467%201.2636C33.0582%2011.2977%2054.6667%2020.0141%2078.875%2027.2525C131.948%2043.1273%20197.512%2051.9149%20265%2051.9149C332.488%2051.9149%20398.061%2043.1273%20451.125%2027.2525C475.333%2020.0052%20496.942%2011.2888%20514.953%201.2547C521.836%20-2.58266%20530%202.8484%20530%2011.2176V18.0108Z%22%20fill%3D%22%23E61740%22%2F%3E%0A%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+  background-size: contain;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-icon {
+  display: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background .background-mask {
+  background-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .brand-shaped-image {
+  border-radius: 26px;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .brand-shaped-image::after {
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22530%22%20height%3D%22136%22%20viewBox%3D%220%200%20530%20136%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M530%2018.0108V320.699H0V11.2176C0%202.8484%208.16439%20-2.58266%2015.0467%201.2636C33.0582%2011.2977%2054.6667%2020.0141%2078.875%2027.2525C131.948%2043.1273%20197.512%2051.9149%20265%2051.9149C332.488%2051.9149%20398.061%2043.1273%20451.125%2027.2525C475.333%2020.0052%20496.942%2011.2888%20514.953%201.2547C521.836%20-2.58266%20530%202.8484%20530%2011.2176V18.0108Z%22%20fill%3D%22%23E61740%22%2F%3E%0A%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+  background-size: contain;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .duet-hero-wrapper {
+  margin-top: 28px;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .duet-hero-wrapper {
+    margin-top: 36px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero .duet-hero-wrapper {
+  margin-top: 16px;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero .duet-hero-wrapper {
+    margin-top: 0;
+  }
+}
 .duet-theme-turva :host(.duet-theme-turva2) .duet-hero-link {
   color: #e61740;
 }

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: 'e3c5b8a95b66d10d648b3dcb13c8a914a797b164', 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: '64fb78e9ff14dade6c8a57e7e0b0c9eda9faa5f1', "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: 'c58b6751f605b678b535275abd7ec18dcd22ce32', "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: 'bd19012201568549a78386fd891946aff5eee646', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'fb5d0c7cdc5bfe931be67c3a685934d5f2f979b7', href: this.url, class: {
+            } }, h(Tag, { key: 'dcaadc6459de680b921529b4cf1a53fb68ec32e5', 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: '23fa4bb0260854f29feb8bc4a9ee8772116d6cdd', 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: 'a55da3a043c0961d1acb0d734f40a13520dfa8f6' }, h("slot", { key: '283eb7096125f841974c4c024826bb026f12f44a', name: "label" })), h("dd", { key: 'b0bf838e880dc0bbd8a408f43519b9c9c14f50ca' }, h("slot", { key: '59a38693290b270f27d9f5e1eddc94eff91009c2', 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: 'ef1a83dc24d287d2e22423313bb9d60cd3c47105', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '8b958da1cd1c474fea165bfaa3b0a1a59bbf48fe', 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: '8d32a9113bf2c7f5cf223fade74451107c65017e', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c2a291f310468f23944eb380df208917ee3f266f' }))));
     }
     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: 'a755c7ef4437e698cd14f5638243822ae80a9da5', role: "listitem" }, h("div", { key: '245f998243bda4eb0de30979a0e3170b44f3e59f', 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: 'd650dc95d9c3d179c443de80c835e220a74c7ddb', 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: 'b813e5b92c2262c8980753710295beeb6938c911', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '792ad8ef544c66a404bd68efad3f61664bd0af88', class: "label" }, h("slot", { key: '400b69105667c569099cf1fb10f4235e0f59d062', name: "label" }), h("duet-icon", { key: 'bc9de20358bde54e02e79ce27a80e97d122fdd8f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ed8e5128bb958f6eab527687f0574f48eae65002', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'e5381a251537978629b818d3771f648122b39968' })))));
+            } }, h("slot", { key: '2b8c3ce983de1c602add43e43c38eb1eb85e3c19' })))));
     }
     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: '5fc02f0c81d1098a7b16009477df67993d685de6' }, h("a", { key: '2b903aecceeae547c7d15a49b7a04258ff10c4b6', 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: 'af824f35477f30049c01db8adb39d06b731643b9', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '883594427c71275ce5b693f706b9505f9e18a71e' }))));
     }
     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: '641913af18dbe2980a845788e89622a9b089dbb0', role: "listitem" }, h(TagName, { key: '328e465490357d6da14c2b790a82a3241a527d87', 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: 'd30575df32ecb1a4ede06522d8eda04bf9fc5fc2', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'b06945bdda299b4e2d7a7209f307bf116b9cf744' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c8fc5e562221728aea6214de11916a8a41c45d7f', 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: 'a13c68b467960207214b517d7308cc0aa12109bc', role: "listitem" }, h("a", { key: 'a54219b4e1e160a5860536bc784b166f17885823', 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: 'b1b80f750becedd7069327b1a3014caf8f8e9796', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd52076de0ceb00251df6fdce37c8fabd9377f8b8' }))));
     }
     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>",

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

@@ -24,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8d7e53e58f968acb9be34f895909df3b4f5d5c34' }, h("div", { key: '123fa743b84c16f63fc588574a9aca0cabf29c80', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'd58ed528272eb49e4391e06146cfecacd23f5066' }), h("slot", { key: 'beeb3ee1a1eaa779fa6e25abdfae15b1d8d2a222', name: "mobile" }), h("slot", { key: '69ac854fa98e6625c20dc274cc913845cb4ec40a', name: "desktop" }))));
+        return (h(Host, { key: '399e510569b42fa52d9461dcf6e935858bbaa763' }, h("div", { key: '93717d9be84024edba4544c474b225f4c150ec61', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'e49c0ec868a936a63599023d6853b2eb0ccbfd9e' }), h("slot", { key: '91564d4869ec5966bd1e6f412543a793985fd5e2', name: "mobile" }), h("slot", { key: 'f26f92f774eecd3513fe969235c6bea01e08586f', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '5673c370989123dc6c1dc1ec214c995064564f56', role: "listitem", class: {
+        return (h("div", { key: '22f2597d7f520c03d164b9612b1f619486745a09', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '1beae6445e3d4c1a3351a077ec57f0915fae8d2d', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'b12f670a6966b1aad67ad42f75e793d2ddd2e833', class: "duet-notification-container" }, h("div", { key: '5ef4f93707358582ff4ff4b96579d5a3554a82cb', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '387c2d580ff608512510b8629f1e7821a8f7dd3a', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '264d0f56b026c4e320d6c25607934506a531a622' }, this.accessibleLabelUnread, ":")))), h("div", { key: '89cf2d458e2267d8325d1cf051e439f1384e7f2e', class: "duet-notification-content" }, h("slot", { key: '471d37b00002cb9fe0333f103af855fb46a54c59' })), h("div", { key: '1026a308355cd17fbc16f386a88e6f7def9df8f7', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '825bb432d6d6402df953b5a1a1f67cfddfa00931', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '669563019a7dda0a692965ee8fb616692c3be343', class: "duet-notification-container" }, h("div", { key: 'fa7b5612cf3b5a172385a915d09e23a1b12258a1', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '21a94b09ee6ef41da16349b53c39c66ccc744db3', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '89a22cdefb3ad8530b55a1a22dc44cb51547a9ec' }, this.accessibleLabelUnread, ":")))), h("div", { key: '6c08f36593b743d1b28dfef6ff96e60c1f0a5f2f', class: "duet-notification-content" }, h("slot", { key: '74584952dedc2d734b8c04626fb0377c34d3d183' })), h("div", { key: '4f6feeebc9b918683300bd434eec573912291a82', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }