@duetds/components 9.18.0 → 9.19.1

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

@@ -45,6 +45,7 @@ export class DuetCard {
         this.icon = undefined;
         this.iconColor = "currentColor";
         this.image = undefined;
+        this.imageAlt = undefined;
         this.background = "gray-lightest";
         this.padding = "small";
         this.margin = "auto";
@@ -105,10 +106,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,
@@ -118,7 +119,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"; }
@@ -380,6 +381,25 @@ export class DuetCard {
                 "attribute": "image",
                 "reflect": false
             },
+            "imageAlt": {
+                "type": "string",
+                "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,
+                "attribute": "image-alt",
+                "reflect": false
+            },
             "background": {
                 "type": "string",
                 "mutable": false,

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

@@ -30,6 +30,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(:last-child:not(:only-child)) {
   margin-bottom: 0 !important;

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)) {
@@ -550,7 +556,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   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 {
@@ -571,7 +577,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   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 {
@@ -581,7 +587,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   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-date-picker/duet-date-picker.css

@@ -33,6 +33,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-footer/duet-footer.js

@@ -134,7 +134,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: 'd88c064ddca3e3dafc81f460513ad82954a98610', name: "extra" }), h("p", { key: '2a86e3021e849b0098a824f4770ab1fac0524ff1', class: "duet-footer-menu", part: "menu" }, h("span", { key: '46ed17532335add2cefab0e7db04c1078be774d0', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'c2b48cdf3eba48b8f36c4b4ec34745929a583cde', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '1a27be7b7525e42cbafd4938765f4fb663ad4d61' }, 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: 'f9d8c513b27020cfa64c0726b6f643522fde10ff', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '6953c48b8449d68d5fc5f20250f3c9a4a0220716', name: "extra" }), h("p", { key: 'a719de2f6b8c5553409230cb6f1b69a2f14030a7', class: "duet-footer-menu", part: "menu" }, h("span", { key: '882e6beba7e5a507d9b6c033cfe387f095d799c0', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '549cf0ba6c0d466d9b2780190587825ee9e0100d', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '8a536c457c02d57754058a461df7a8db0b1dd5dc' }, 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: '994c9ba7d17e8f9074e1191711590d212c044e3d', 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

@@ -14,8 +14,8 @@ export class DuetGrid {
         this.mobile = "";
         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";
         }
@@ -46,6 +46,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) {
@@ -327,7 +328,7 @@ export class DuetGrid {
                 "getter": false,
                 "setter": false,
                 "attribute": "alignment",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "\"top\""
             },
             "distribution": {

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

@@ -84,6 +84,7 @@ export class DuetHero {
         this.image = "";
         this.imageSize = "auto";
         this.imagePosition = "auto";
+        this.imageAlt = undefined;
         this.variation = "default";
         this.back = undefined;
         this.listItems = undefined;
@@ -155,6 +156,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)",
         };
@@ -191,7 +198,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '1a42c8fe01fb20e1a6cb255106032dc91c0781c0', role: "region", class: {
+        return (h("div", { key: '1fbd9962c3489ee8b3c350e99fe0b7e99a0db6f2', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -209,17 +216,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: '57acc6a7f9645ff7e6c276326ffff51325fa2d4a', class: "background-area" }, h("div", { key: '841e799d7a7f515ae81804f9814643bdc059aeab', class: "background-container" }, h("div", { key: 'b2ceb38b291695ee09ca1d8af674c3108373cd0a', class: "background" }, h("img", { key: 'a3dbb066b0a473467b3968f5bc6ba2ff3bc5fdcb', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '3cf5f570be50174dbf27d73676da4dfa11b501e3', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '87611a0c4e7b473a04c6a19f32b73a641279069c', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '85f72141a126387b5e99a78f64132dd4e2d42b0a', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '5a9a357048947507f0733d4e56d04e53e301b632', class: { background: true, [this.layout]: true } }, h("div", { key: 'b341539d0d282bb53f0f162046fa0d7e6e0295a7', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '77c79dfcc391dc1656e1c0581d52f8f88e03e84a', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '8aaf9cbfd9c5e26c65aa0a104df3962529319a1c', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '32ff4ebb447a7f348fb5639d7bb79f1362959c44', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'db6bf1a9fa08d881fece8ac1e667983893250782', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '5a457fda070ace0dba61014a8030110057147ddf', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'ca6999b4fca4165fba696ad2d6f2d5d7286e7735', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'b3bae8667fd012b3a6b480962e6e77ca72b86572', class: "background-area" }, h("div", { key: '58aec435b461102c8c24a97b409f2e820fe11292', class: "background" }, h("div", { key: '31a1abf658dabc4ce7213b8c9e959d0f89975a78', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '2421d09afcabbabc03c254aea2764d269b4f1c3c', class: "brand-shape" }), h("div", { key: 'c8fc67a5b678c63007b66f3b74f2e72de7d4bd4d', class: "brand-shaped-image" }, h("div", { key: 'c87f70958459675a9e4ee1e9f97b82af4ab23cf4', class: "brand-shaped-image-wrapper" }, h("div", { key: 'a29434e7acdaf5e94816a615bd5664dfce459e02', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '1e6792a7b46cbd6889593641cceed1e7fa6545be', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '5a4a0819a41e50bab74f25a6db76ee9a3dc322a8', class: "duet-hero-image-mask" }, h("div", { key: '019c3d85ac09a32989cd461509194453ecfbc1e5', class: "duet-hero-image-wrapper" }, h("div", { key: '61ff1f6a788a631f4ad166e6a3aba17736668627', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '53694382832db2ce4beb52cca2176384aa573e3a', class: "duet-hero-back" }, h("duet-button", { key: '5b946c6c31107a9d10292c0bccb01bfd0f1d9d41', 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: '1fc3163bd1a52e8289056313c08f4697e9e2b662', class: "background-area" }, h("div", { key: 'c21f6997d31c25133dca05d1a853f7d490e60052', class: "background-container" }, h("div", { key: 'ac7a43202885742dc98a535143954c97def0a855', class: "background" }, h("img", { key: '9574406eb8ed97f0decbca4def0bf7a94529679d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'd35128a5fa6f8a7f00e8df3940a4e347822aec04', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '226c7247fe08bd694da1d594d5d0efbce3cc99cb', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '47d1811c6af96ab9536f5da9ed053b7c71c2b303', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'abbdcbf247461ae489bea75984676f6c0010d0ff', class: { background: true, [this.layout]: true } }, h("div", { key: 'd684e7a5cb272d16b0bc53a12cda860a3304b7d7', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '54d3e5d5fc433bb7ff51a5b2ab4653b11dd93789', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '8f93ff6fa715b3218549aef0837da54722630e56', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '88f93fa6f5ebd24b51f30b1214821abbf249e50e', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'd75f941bd6917dafe5dad64a5122b5058e09c4a7', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '7fbcde433ec34499af429a23038615f9d5b02849', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '5060f6dc479a54be7a91ee4f14bf133e95425514', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '22bea138a33fcceb6c25e01493300650f5060bc8', class: "background-area" }, h("div", { key: '1700e043bf84702aa49061b78e4f66f5e4ffd7ae', class: "background" }, h("div", { key: '2910c2fcb2d2a0f97814807cc00f0baafd092132', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '36edb6e5216814ff3820a0f6e0a51cfdf3f27bba', class: "brand-shape" }), h("div", { key: '68f10868f4fbfd2979e44f30ff065684b2e1762a', class: "brand-shaped-image" }, h("div", { key: 'c6d8b858f43531bbc4d2093df7d56dde145ff0ae', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'ef5bdd9d2fb65140dbe3b5842938aff51fe47c1e', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '0d0f813a8c87fc705f40d326cf04ca661b4e0345', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'c85b5f23fcfb67a8853a895d6c34bade622c4bf4', class: "duet-hero-image-mask" }, h("div", { key: '9f96a6ee0d7dbe965c4d87cf9c6042ed371511fe', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '3f91277d921ba1e24d5d1d91d9be8eb0e721230a', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '04bebe7cf9a7861063df73b4b145e23024b2b357', class: "duet-hero-back" }, h("duet-button", { key: 'aa268558b148b77731c78c8a9552f5ec44f1fb99', 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: 'f65b35a60499027f178bc1ffd29358c43a25fff5', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'b0357e61c545e38792e90376feace131901da422', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '8e08891d1f98c17a88421b49d4a8ba8b9d3ec005', 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: 'c5498af53feb8925d894ac6a1ddbe3861263e35e', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '7c10ede17b3fac92934c2226e7300604887cc2c2', 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: '8c3ab823d74238e029a1390a099e070ac54f183c', 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: 'c0f51acedd4228682c78b214a6043e0b21b50c67', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'd08af51699647880a95eab719f08d83ee610d8d4', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'f841d8d7419c13a61a9a56872304a452a09545f6', 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: '90d2f58011c697921c96233d88b7d4770a2c2375', 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: 'f941fa7b351e3e0100959168f247323e1c8149ba' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '2d248f92700a3821930d14ee88822880f5d25e48', 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: '1cc9b8391c6b969c49874c06c6cd8dfcfbec259c', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '4ff89423844a75b8297e5120796238a6e081f2e4', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '89a6e67512a31710e42bdaf18842e5f1e3d3196c', 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: '07977695a569298f04255bd459abef76a50d9b9b', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '4e142cb8344bf05edafa30facc7036014bb46f53', 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: '600e6a035d0449a6b8523dd72a5ff0c034a8524f', 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: 'df3fab2c2877e3c7d87ffaf3095741447b66a6d4', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '3a32395112fb7b7171f5dd7106df32c878148778', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'c8eac98c6f6720e21304abdc668d4b823d38de24', 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: '1ab6ba33bd362d329be7940d419d59ff91559283', 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: '1d17230b6fe08862a4572c9f3199f83ab0b7f5b5' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'c3fe5e8fcbf5a15479cc241e5a84633653842440', 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: '9a66e46b6a46f6127b2b2ce07aa7cec2410e0f6a', class: "duet-hero-image", style: styles }), h("slot", { key: '4eca0efe9a6fd469214735a604a80ee11e1ecd5f', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: 'e0342b005149594372844914be95a65e39febd3f', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '7484f06d422af7427143c2d99cb97a1a79b895cc', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -764,6 +771,25 @@ export class DuetHero {
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
+            "imageAlt": {
+                "type": "string",
+                "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,
+                "attribute": "image-alt",
+                "reflect": false
+            },
             "variation": {
                 "type": "string",
                 "mutable": false,

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,9 +33,13 @@ export class DuetIndicator {
         };
         this.variation = "change";
         this.accessibleLabel = undefined;
+        this.theme = "";
+    }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '068dfb1142e610afba3d6a0bb44cc50d5af2e0be' }, h("span", { key: '95dda3401969956579bb40c3de9a33be2390f7b8', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: '1e6483d4032eb771fc01507692a92bcc962f346a' }, this.getAccessibleLabel())));
+        return (h(Host, { key: 'ca297bcbf550d281e420d713ca331510d31998d1', class: { [this.theme]: true } }, h("span", { key: 'b4050666cf945dec5929e5130bb83c2f21b6ae6b', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: 'f0ebcdff7f5413f8ac61618dd7873f6626769091' }, this.getAccessibleLabel())));
     }
     static get is() { return "duet-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -94,6 +99,32 @@ export class DuetIndicator {
                 "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "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,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }

package/lib/collection/components/duet-input/duet-input.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 (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);

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

@@ -94,7 +94,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 = {
@@ -123,10 +123,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: 'd83502af54d3fa4f2aec80d7082a5a6969207a39', class: {
+        return (h(Host, { key: 'bcb9fe0becd4120ea1e5f71539e54bce7b8dd9e5', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '534e9bcb74e02dc050ac1986b251f08215c8aa7d', href: this.url, class: {
+            } }, h(Tag, { key: '6c49284e34742515619fed318a67bc7f62484a74', 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

@@ -308,11 +308,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: '579ba1b41caf40e97242aeacbf47ead29ea6aac7', class: "duet-modal-header" }, h("span", { key: '353ab4ce18f8cfaa384b7d1e02e5daf03895fc01', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'd1b1bd5e49db08393d62154e7a3524ea4bc5fc12', name: "top" })), this.icon && h("duet-icon", { key: '559c22da92b732cc829c9047bdc0c6b115058f32', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '4ffd1a28f6c1ec9a946b362f588e04350bab1dbd', "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: '2c9b370fbf07ff1804bb2bb8590593dae83cc629', class: "duet-modal-spinner" }, h("duet-spinner", { key: '77c91d8fef8f52c65b5565388343bf0021529c1f', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '3d4aa27f79ea4483c783d8f00f29663f0ff8cf0b', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '579ba1b41caf40e97242aeacbf47ead29ea6aac7', class: "duet-modal-header" }, h("span", { key: '353ab4ce18f8cfaa384b7d1e02e5daf03895fc01', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'd1b1bd5e49db08393d62154e7a3524ea4bc5fc12', name: "top" })), this.icon && h("duet-icon", { key: '559c22da92b732cc829c9047bdc0c6b115058f32', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '4ffd1a28f6c1ec9a946b362f588e04350bab1dbd', "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: '2c9b370fbf07ff1804bb2bb8590593dae83cc629', class: "duet-modal-spinner" }, h("duet-spinner", { key: '77c91d8fef8f52c65b5565388343bf0021529c1f', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '0438008ab36af91adcbd0fa0cc1ad22980e086be', "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: 'c67bd34671197745eca7f15cc88c1d42b2e185c1' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '2f174789d1cf40896384bc95dd6cece3f847ac00' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,6 +30,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);
   }
 }