@duetds/components 10.0.0-alpha.30 → 10.0.0-alpha.32

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

@@ -34,6 +34,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 @media (max-width: 35.9375em) {
   :host {
     width: 100%;
@@ -46,6 +49,9 @@
 :host(.square):last-child, :host(.square):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.square):last-of-type:not(:last-child) {
+  margin-right: 12px !important;
+}
 
 :host(.input-button) {
   z-index: 250;
@@ -61,6 +67,10 @@
 :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-small):last-of-type:not(:last-child),
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type:not(:last-child) {
+  margin-right: 4px !important;
+}
 @media (max-width: 35.9375em) {
   :host(.duet-small),
   :host(.duet-x-small) {
@@ -74,6 +84,9 @@
 :host(.duet-x-small):last-child, :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type:not(:last-child) {
+  margin-right: 2px !important;
+}
 
 :host(.square.duet-small),
 :host(.square.duet-x-small) {
@@ -84,6 +97,10 @@
 :host(.square.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.square.duet-small):last-of-type:not(:last-child),
+[alignment=form-distribute] > :host(.square.duet-x-small):last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 
 :host(.duet-expand) {
   width: 100% !important;
@@ -623,7 +640,7 @@
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
   color: rgb(230, 23, 64) !important;
-  border-color: rgb(251, 225, 209);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default:hover {
   outline-color: rgb(230, 23, 64);
@@ -684,7 +701,7 @@
   border-color: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
-  border-color: rgb(251, 225, 209);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square.duet-button-negative {
   background: rgb(230, 23, 64);

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

@@ -258,6 +258,9 @@
     margin: 0;
   }
 }
+.duet-card-collapsed .duet-card-heading {
+  border-radius: var(--duet-card-border-radius);
+}
 .duet-card-image-mask + .duet-card-heading {
   border-radius: 0;
 }
@@ -562,5 +565,5 @@ a.duet-card:active {
   color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-card.duet-theme-turva .duet-card-footer {
-  background: rgb(251, 225, 209);
+  background: rgb(245, 246, 247);
 }

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

@@ -151,10 +151,10 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: '0df974f46d041de1e662425099375c3a7d1a4930', class: {
+        return (h(Host, { key: 'd92cd6fb922f1165e1d341221ac3f5433252606c', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '0a128da0eff230a20db8b3842e8a5d86e6735701', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '7f870fc5061cd48c3464bd19ecd780fbb33f3e78', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -164,7 +164,7 @@ export class DuetCard {
                 "duet-card-has-bg": this.background !== "gray-lightest",
                 "duet-card-has-icon": !!this.icon,
                 "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: '1a6a47b88fb600849eaa9cc8d5108a41bd24b9ce', class: "duet-card-image-mask" }, h("img", { key: '3010252456dd0e210f11f32341a28c87ac872f4c', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'e5a1a24dfdb0d8d6d247333361f0f7bcccb05b0e', class: "duet-card-content", id: this.cardId }, h("slot", { key: '59044d033fc2b54dde397f5f18a424331208e54e' }), this.hasFooter && (h("div", { key: 'd9019dd209622eb7efbe267a7f7acf607956a3fa', class: "duet-card-footer" }, h("slot", { key: 'de1adb73d91026f80345564e24784df9c3fc3ee0', name: "footer" })))))));
+            } }, this.image && (h("div", { key: 'fd6822d5747d2882842c9c2392b28d8b7a2693f2', class: "duet-card-image-mask" }, h("img", { key: 'a1952cf1f82a4f8593130d9990ef27a2a982e5d8', src: this.image, class: "duet-card-image", loading: "lazy", alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'a11237f14582fad87aaab15e4dccad5c6ffd7b0b', class: "duet-card-content", id: this.cardId }, h("slot", { key: '80d250aa9dbb0f39a7683c6d2a1e1cdaca75cdd8' }), this.hasFooter && (h("div", { key: '87b27d7c69e3d5f3ab7bdb75cc76a1a11900ef0f', class: "duet-card-footer" }, h("slot", { key: '1212e0d9a33349cf68c7b667069077e02ee30197', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -426,6 +426,25 @@ export class DuetCard {
                 "setter": false,
                 "reflect": false
             },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "background": {
                 "type": "string",
                 "attribute": "background",

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

@@ -32,6 +32,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 
 :host(.input) {
   margin-top: 6px !important;

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

@@ -32,6 +32,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 16px !important;
+}
 @media (max-width: 35.9375em) {
   :host {
     width: 100%;
@@ -68,6 +71,9 @@
   :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
     margin-right: 0 !important;
   }
+  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type:not(:last-child) {
+    margin-right: 16px !important;
+  }
 }
 
 :host(:last-child:not(:only-child)) {
@@ -552,7 +558,7 @@ label.disabled .duet-checkmark-container {
   border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label {
-  background: rgb(253, 247, 242);
+  background: rgb(245, 246, 247);
   border-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
@@ -573,7 +579,7 @@ label.disabled .duet-checkmark-container {
   border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-info {
-  background: rgb(253, 247, 242);
+  background: rgb(245, 246, 247);
   border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-checkmark-container {
@@ -583,7 +589,7 @@ label.disabled .duet-checkmark-container {
   border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-info-toggle[aria-expanded=true] {
-  background: rgb(253, 247, 242);
+  background: rgb(245, 246, 247);
   border-bottom-color: transparent;
 }
 

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

@@ -154,6 +154,9 @@
 .duet-collapsible-heading-icon:last-child, .duet-collapsible-heading-icon:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > .duet-collapsible-heading-icon:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 [aria-expanded=true] .duet-collapsible-heading-icon {
   transform: rotate(180deg);
 }

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

@@ -162,7 +162,7 @@ export class DuetFooter {
                             : "navigation-arrow-right", "icon-right": !((_c = item.href) === null || _c === void 0 ? void 0 : _c.startsWith("tel:")) && !((_d = item.href) === null || _d === void 0 ? void 0 : _d.startsWith("mailto:")), "icon-size": ((_e = item.href) === null || _e === void 0 ? void 0 : _e.startsWith("tel:")) || ((_f = item.href) === null || _f === void 0 ? void 0 : _f.startsWith("mailto:"))
                         ? "medium"
                         : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)));
-            }))))), h("slot", { key: 'ef58bb0c86abf7d7922468e818c1211aa0c1745f', name: "extra" }), h("p", { key: 'da0032d001c78e0b1c4c574891959a2cc2217101', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'ff5f4090afdd2a8c1d563e4942c6d654d1f03c68', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'a2d153deab53043cc12006667388461b1ca0e502', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '58b63836a80f8b342a259661da05fe8e9f961809' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '29df5df3e5b34d3c3329350878c3196ef7afe689', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '361a7bcbb2822507495f9ce3d2cba71c5787ad60', name: "extra" }), h("p", { key: 'd550a699008989e92c8ccb0f856f730a0f0d408a', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'd0382fd0c48916c77ae76340f1797b35edb62863', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '085136a2a21443c434ef94fd8917616c07f764e9', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'df5f48b86ef46c1bfb03cf75e55ef2e402af1479' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '475e550d7b43e8a0ddd78b4ea001c78452b783e1', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,8 +45,8 @@ export class DuetGrid {
          */
         this.gridTemplate = null;
     }
-    validateAlignment(newValue) {
-        if (newValue === "form_distribute") {
+    validateAlignment() {
+        if (this.alignment === "form_distribute") {
             console.warn(`DuetGrid alignment value "form_distribute" is deprecated, replace with "form-distribute"`);
             this.alignment = "form-distribute";
         }
@@ -77,6 +77,7 @@ export class DuetGrid {
             this.childObserver = new MutationObserver(this.updateGridItems.bind(this));
             this.childObserver.observe(this.element, { childList: true });
         }
+        this.validateAlignment();
         // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
         if (this.alignment === "form-distribute") {
             if (!Build.isServer) {
@@ -197,7 +198,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9212e2e0bff89f3625e4194c7c1ea2d8f71576c9', class: {
+        return (h(Host, { key: 'bc25c7c22f88bade50b1241086cbc3fccd94db28', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -224,7 +225,7 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: '3b4490d66c0ad8256492ab43535a62150495ca41' })));
+            } }, h("slot", { key: 'de127117a8189fccfa81ff58be25f057afb45729' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -355,7 +356,7 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "\"top\""
             },
             "distribution": {

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

@@ -241,6 +241,12 @@ export class DuetHero {
             backgroundSize: imageSizeIsCover ? "cover" : null,
             backgroundPosition: imagePositionIsCenter ? "center" : null,
         };
+        const bgImgA11yAttrs = this.image && this.imageAlt
+            ? {
+                role: "img",
+                ["aria-label"]: this.imageAlt,
+            }
+            : {};
         const buttonStyles = {
             transform: "translateX(-8px)",
         };
@@ -277,7 +283,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'fc3ecc930f72a824e8e8e488594714fe52f31fff', role: "region", class: {
+        return (h("div", { key: 'a872538e09667dd29910e010ec8ccc159fc15193', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -295,17 +301,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'a8cdeb3e0c17fed0de61ab1c84a5f8b4eb92d43f', class: "background-area" }, h("div", { key: 'c0e772e0eb58c3b59be2ef2441653d7d9355b7be', class: "background-container" }, h("div", { key: 'ff30622beb78548046143236845a8c6252dc4c40', class: "background" }, h("img", { key: '4ed685b3b1f5926867fcf8e53050a4f4dbe71060', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '8757c109c1ecbf249d31b7f3fdfe062e7cbcdf46', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'b6b734d21571cbe03adab7be1942caa351eb886e', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '5e6e459f153a9665bc8993789961ae5d23ff389e', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '593f8f68c2df59b1e6499eb6f59394dee782891e', class: { background: true, [this.layout]: true } }, h("div", { key: '49aaadfc675e5cc1cf528cfb3516577d3baa1c4f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '52d15566f49e4ee0d72ab9ec10f992d55291a2cd', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'a7275c16c76b667037cfe0044b21b11ce09bf413', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'a3522f3ed67befbb439ee07195e959180b3e01a1', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '3cb4ef66b9af1357e75318bc6f97e732e1787ce2', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'c15dfb764fe13d5766c3ad5e2b4bf012c739e257', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'd5f3d4a50473d2e2b56575de789e42c246c69987', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'c0ace6245e4431276a7e72a618b37f967d0b4bc5', class: "background-area" }, h("div", { key: 'cf04f88d15da106d8416d910835e07e87dd04bea', class: "background" }, h("div", { key: '0536ea5ec869a1ec253ab616a12485b01433982d', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'd7933f6c85dc709697ba451cf89cda8f7a9e3f03', class: "brand-shape" }), h("div", { key: 'c5fd0f3a99befd7d054303c9ebfd596989e7ccb8', class: "brand-shaped-image" }, h("div", { key: '96c71979b18e456b1a94fbb2bc1ae56bbf5cf318', class: "brand-shaped-image-wrapper" }, h("div", { key: 'acd8a1ce0a639e28970c6ca41b789bcfac03f9c7', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '8d08cf63aac9a03e1874b8cbfa4741ee1f1c4949', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '6da49938f8cf4c5038179fb9b48e0d8d5b8a521a', class: "duet-hero-image-mask" }, h("div", { key: '1682a488a00e1188d2be47d0aa895277f065adee', class: "duet-hero-image-wrapper" }, h("div", { key: '6fc100efe321915493d840f3fd2f01100fa954fd', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '2777feaa8cc994cf4215d49143c69bee06d85552', class: "duet-hero-back" }, h("duet-button", { key: '57315d5cb34c6db55f6642224b442b12ebb7fe9a', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '5fce1acae0804c6aa76b81868cac88f4de370591', class: "background-area" }, h("div", { key: '26bc63e00bbe21bc2529a0a6b74b73df20d529c0', class: "background-container" }, h("div", { key: '89f29c709d599b57c3b3897291587bd4a572042a', class: "background" }, h("img", { key: '6b18c9f0c48c5ce6f552a8d10e587587872307c9', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'caaa93907f9d4a2f49f7b3f16b61dbbdbcd61c7c', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '763eaabf43c0bf0d6a18c070e393a03dca0d4238', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '9e62908d2cbff9a8ce2bd5434b07baf8828a9214', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '68716ca1d4bbb642c486676fa44b089e03c3426c', class: { background: true, [this.layout]: true } }, h("div", { key: '36e338bcd659d3fc9a2a326f9352f24956c43256', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '0dc480d5857ee243dc06ce057cc781529bcdb973', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '2d7de37e7d6f03f9e6c0d87dbe74a809531341bf', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'a80f4df7139b1dc0c164a6533aa742ee4a1df05e', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '8507b8c3105846c34aebf25805475ceb753186e0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '890b16f5971cfa309d72560f7e74f8d9fc319f66', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'b0f2677fe1a4b696c44cbe9d3439ff62f2cbce4b', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '1e6981b9b8e33f2074418ccd073b295e6089e9ed', class: "background-area" }, h("div", { key: '5d80662daab0e2a82fe04cef22fd6810efcf8546', class: "background" }, h("div", { key: 'c1900e8ff166fda36b996ddbc3f440c629e9f035', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '138a86337de478e6349b92624f09e7a54cb0e931', class: "brand-shape" }), h("div", { key: '2bb8747411e19ad3dd8b3ac634dd0726e4183e0d', class: "brand-shaped-image" }, h("div", { key: '5e6c1579f9e9662a700d602582d3034a818b3693', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'd7209ba3a4242b87c9d447c73a2879dfbc7d9d06', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '21e9a6acecfc916399a76bf19e00835d28fe7c0a', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'da6ce766831a1d2a717fe419ec433aa1f91b03de', class: "duet-hero-image-mask" }, h("div", { key: '7cf7a7dc580dc783f9f5f50bcbf72d41b15eb378', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: 'd4ae32f29a59ee2f6430d31a34b8958f467155d4', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '6863cbe7678662d81cf79c318cb3b75de005f314', class: "duet-hero-back" }, h("duet-button", { key: '55e2dc9e3964c7dde235ddff6a95443997c99305', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '282df2be20e350964563837a2344b4fd3fbd6812', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '0a04e8f9ada19e0e157a52295248291e4ce30703', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '38897d3fc34f854e13e2675bc3c79005a7ba16b1', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'c77b97021d7c7a735ce0aeba42fabce91d83da39', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'cd22335d7881e672e2df6367d58c734784ff5f6e', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'ce92b7e2ce3f86fa082b8601dd070d5a76b27437', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'f79855d9d88deba48f86e05f2318cf9459da6db0', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '9b3cefb7c435efb47e07a1501e18dee9db1b6b5b', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '1c4915294fb3b2335ff981939207a961069d6b74', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: 'ba2b9cded251cad0aea4ebd4c66d1fddf78bea38', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '0570f78ab10d749668c6dc20bb97db5896ce1039' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '647db5a0b2aa0416fd2a499bf168523b2f090e81', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '5f76b32e9c37115a665dba180113bfaf8d706e1b', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '3c5b2a7062ef0a22c8c78fc2bb5c4a0f4d5e351e', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'ffb0037467d7a1f483b3bd21fc274ec83e790f1a', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'ccd809ffdd2d4fc7ac48632759b604b647add40e', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'bc6c130c314bf164c42fc8cb87fda199967c9237', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '963c8438ec6323eef745e2405dba51c660bf3437', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'c3de01174e3976af162c9cd8610bc5028bf94a2a', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '356d3bdf54e70df94df7588bddd1b11d4b506826', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '7368b837749d30ef0f82ab3c896bbbfc5407f797', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '9995622873298d66e258e9de20e03d7eed3ace16', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '595b3c8c2b34fe4ce259d69876c3da3a1ef0e826' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '9b5bc347f7ae36979655a300f74943ac226f6516', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: '32f36cc551b37aefb3a06403431479f4d4e7460d', class: "duet-hero-image", style: styles }), h("slot", { key: 'd53f84c8a9c995bb049ba25531b49b8119d40353', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: '19a6e4b9ec23150728f38a1ddca45980bbf9deb0', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'df6fbc1b019210185ffefc3df52dcb8c197de8f3', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -851,6 +857,25 @@ export class DuetHero {
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "variation": {
                 "type": "string",
                 "attribute": "variation",

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

@@ -43,4 +43,8 @@
 }
 .duet-indicator-success {
   background: rgb(29, 106, 88);
+}
+
+:host(.duet-theme-turva2) .duet-indicator-new {
+  background-color: rgb(230, 23, 64);
 }

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

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLocaleString } from "../../utils/language-utils";
 export class DuetIndicator {
     constructor() {
@@ -32,12 +33,19 @@ export class DuetIndicator {
          * only in special cases, as errors and succeses normally require a more prominent message.
          */
         this.variation = "change";
+        /**
+         * Theme of the component
+         */
+        this.theme = "";
         this.getAccessibleLabel = () => {
             return this.accessibleLabel || getLocaleString(this.defaultLabels[this.variation]);
         };
     }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
     render() {
-        return (h(Host, { key: '09990afce3e74a91ff9ce76ac6a038418e40272e' }, h("span", { key: 'e5695f01c4d009bc1c18b92b07975980e799becd', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: '4300b55a370c674cb6bd0caf3f5b834e382481a9' }, this.getAccessibleLabel())));
+        return (h(Host, { key: 'b2f09b35f7fbb61445756df5e6df2f75bb0246ff', class: { [this.theme]: true } }, h("span", { key: '81de43cc175005dc2001d65e7e34813c1afbefca', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: 'cebd5630b42f0c4bca8497db1b2caa5326822ef5' }, this.getAccessibleLabel())));
     }
     static get is() { return "duet-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -97,6 +105,32 @@ export class DuetIndicator {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }

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

@@ -36,6 +36,9 @@
 :host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-link-button):last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -155,6 +158,10 @@ button {
 .block-center.duet-link.none {
   padding: 0;
 }
+.block.duet-link:hover .duet-link-content,
+.block-center.duet-link:hover .duet-link-content {
+  color: rgb(0, 97, 155);
+}
 .block .block__icon,
 .block-center .block__icon {
   display: flex;
@@ -430,30 +437,40 @@ button {
   }
 }
 
-:host(.duet-theme-turva2) .duet-link.duet-theme-turva {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link {
   color: rgb(185, 3, 41);
 }
-:host(.duet-theme-turva2) .duet-link.duet-theme-turva:hover {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link:hover {
   color: rgb(140, 0, 30);
 }
-:host(.duet-theme-turva2) .duet-tab-to-link.duet-theme-turva {
-  color: rgb(23, 42, 59);
-}
-:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva,
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.button, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button {
   border-color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva .duet-link-content,
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva .duet-link-content {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.button .duet-link-content, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button .duet-link-content {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva:hover {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.button:hover {
   outline-color: rgb(230, 23, 64);
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button:hover {
   border-color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover .duet-link-content {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button:hover .duet-link-content {
   color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block .duet-link-content, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center .duet-link-content {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block:hover, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center:hover {
+  color: rgb(185, 3, 41);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block:hover .duet-link-content, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center:hover .duet-link-content {
+  color: rgb(185, 3, 41);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-to-link {
+  color: rgb(23, 42, 59);
 }

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

@@ -152,7 +152,7 @@ export class DuetLink {
         return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
     renderBlockContent() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary" }))));
     }
     renderButtonCardContent() {
         const iconWrapStyle = {
@@ -181,10 +181,10 @@ export class DuetLink {
         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: 'c6dfd9dd4ce34ea1deea147e76481197cfa90854', class: {
+        return (h(Host, { key: 'c9771c4890b8c42dd47c1b5794a9bd1bac35e26f', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '72968ba8e93c2773e8cdbdc7521a854e63569826', href: this.url, class: {
+            } }, h(Tag, { key: '63c398171aaf01ce55e54040fc911587749b4d0e', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -28,6 +28,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;

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

@@ -367,11 +367,11 @@ export class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'eddd353009b508fe5ecd04aa866f076a064626de', class: "duet-modal-header" }, h("span", { key: '696ad960d20a5e5bf68dc9ec9da5d59773accf10', class: "duet-modal-inner-slot-top" }, h("slot", { key: '28f0677621250a3da6899f055ba374dd78a17a35', name: "top" })), this.icon && h("duet-icon", { key: '7b9e797b9f5296effdfc0beaac29be90e0310436', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'ba31f51f36989421ecb8f741b285d7d2638f2f7a', "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: '2bae6fedd2f1ab7b40264c2d6c3b4f69f9627d2c', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'd5f27b579909233f930b09251b7faa6fd7d35a78', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '80dc7b4389d406fc348351678e2c234f17c22259', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'eddd353009b508fe5ecd04aa866f076a064626de', class: "duet-modal-header" }, h("span", { key: '696ad960d20a5e5bf68dc9ec9da5d59773accf10', class: "duet-modal-inner-slot-top" }, h("slot", { key: '28f0677621250a3da6899f055ba374dd78a17a35', name: "top" })), this.icon && h("duet-icon", { key: '7b9e797b9f5296effdfc0beaac29be90e0310436', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'ba31f51f36989421ecb8f741b285d7d2638f2f7a', "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: '2bae6fedd2f1ab7b40264c2d6c3b4f69f9627d2c', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'd5f27b579909233f930b09251b7faa6fd7d35a78', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: 'f667634f35e5048df2ea536709e76beca9cb3a49', "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: 'fc0270b2ceb540d2e2015ba9131dcd46f01c702e' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'c8523317779ddc6acd2de899022ea31535612291' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,6 +98,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);

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

@@ -159,6 +159,6 @@
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
-    background: rgb(253, 247, 242);
+    background: rgb(251, 235, 225);
   }
 }

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

@@ -5,6 +5,7 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 export class DuetNotification {
     constructor() {
         /**
@@ -71,12 +72,18 @@ export class DuetNotification {
     async setFocus(options) {
         this.linkElement.focus(options);
     }
+    getAriaLabelText() {
+        const slottedElements = getElementsFromDefaultSlot(this.element);
+        const slottedText = slottedElements.map(e => e.textContent.trim()).join(". ");
+        const indicatorText = this.highlight ? `${this.accessibleLabelUnread}. ` : "";
+        return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
+    }
     render() {
-        return (h("div", { key: '7e4e38752baee0c65e84c4edfa1ea6225daef0a9', role: "listitem", class: {
+        return (h("div", { key: '8497858acf685b75adce100af83521ea62dad249', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'd533b34bab8bed57448b132fdcfd7913da27d165', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '9fd48a6483ee03a967abd2deca506a49eda9910c', class: "duet-notification-container" }, h("div", { key: '0a647e9111eb00ae4268e20b72e248edcf211ab5', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '61edc87a1995f7ebe37cefff3869dab6a3840d58', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '461dfcbff675bba86b0e66901b44f272e34b5619', class: "duet-notification-content" }, h("slot", { key: '84fbc735b2ee2b129360419aa2d7a310a4b2895b' })), h("div", { key: '0bd791445a03f66f304fdb094200d95e409fcf09', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'd055bb5cebbf8d33eb35d193d1bb1fa106c5ec49', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: '37b18aada4bbdcc07fbae2fb2a379e4ce499d1a2', class: "duet-notification-container" }, h("div", { key: 'd82a6a30c51dcbe9fa55d184f9475ee52824c960', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'ba8cf675f5f79738b621bb60be60e955648f72fb', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '7616f1c0b61f842cb19959f8a26d972740d4983c', class: "duet-notification-content" }, h("slot", { key: '3d15bf405f3f7e6bb7b699835882720db81c60ac' })), h("div", { key: '479850eacc300888b148101759908b962db1d24a', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }