@duetds/components 9.18.0 → 9.19.0

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 {
+  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 {
+  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 {
+  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 {
+    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 {
+  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 {
+  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 {
+  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 {
+  margin-right: 8px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;

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 {
+  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 {
+  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() {
         this.language = getLanguage();
@@ -42,12 +43,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: 'd277f46ce75b675a1b2dc80863ab5c6e79608d77', role: "listitem", class: {
+        return (h("div", { key: '5818ed344341a4a8b2f3924c5bebcdb32fdcb624', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '64c9209bdab15027121f6c52ef86327ce415f685', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '9fa32762c6c1805a3c15d1a57f5882c82d36607d', class: "duet-notification-container" }, h("div", { key: '80bb71a20d0c3f7c23d455758025b080e128ca35', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '4ea88060a28ed5abad5ff09dbf9fcdbab758bdf9', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'b3c53a5318b7dae17185948ba480ee2665e8f67e', class: "duet-notification-content" }, h("slot", { key: '88463f9aeca48107382f18f377132015ef037115' })), h("div", { key: 'cac28a3e91a692ae7ad32bdb95768b1c39141c54', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'bc48f0cc673e62d599c92bbfe62e9d2f071aa218', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: '225bba19f4b8e4f6904260d8c482af31e0615ea7', class: "duet-notification-container" }, h("div", { key: '00719c35eecb0f2073532b13d6baf67f15dd6313', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'b2cca7dafc46f20de25127773a7c02c377e46bde', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '8d950debef17e307570eaa36666de6a0e0347bec', class: "duet-notification-content" }, h("slot", { key: '7d672776e4e826fee3deb51f83fd4d7626a32d5b' })), h("div", { key: '01fe9a4420c8cdfd4943e42b17206a1a1380588a', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-number-input/duet-number-input.css

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

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

@@ -342,32 +342,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c9fe96fc3da1353342e9b864e7ad2fcf711dc17c', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'ef4ca286ceae883a08fde9768c168d54d9e3b251', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        return (h(Host, { key: 'af038eda29336dcdc68a74b852dc74cdd59a94a5', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'c3ae9d1579a649410f69c67e7611327a4c5477ff', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
                 "duet-pagination-nav": true,
                 [`duet-pagination-variation-${this.variation}`]: true,
-            } }, this.numbersStore !== "" && (h("div", { key: 'f8786d74f5cfc028016b66efc34c6a248b0b3795', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '79781be8b7faa9eb353efcf74864c83602de956b', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '8ddba22cf4f5ecd14ee57316062fdccb9fc92096', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '8db1a4b8626628c12b28be06480ffa38956a573d', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: 'd2c3831b4e1c9bc464b046164f2123649c39bc54', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '3d83be2bdf8e48b4b942ccbdea92dd083bf9d71e', id: this.listId, class: {
                 "duet-pagination": true,
                 "duet-pagination-is-dimmed": this.numbersStore !== "",
-            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '9ed42f129f8f0c87da06196b110c8d556aeb279a', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '4ae9c4d863f47173a26acaac2b427baf68490e45', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '00d898898b26870fb0aa71e5003cee8e322d6e53', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: 'fea77adade297e5dd4421b10c951ae0a9c008d9b', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'b362823d28d9f1b06fbf6962754d71273c2a5cf8', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '2c02910d78403d4529f630dd51e449145bfe048e', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8f433ca73a21d2593b5993c33a9921f1773eec76', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '9a2a092c0c60212ccacab3da408c58e2adc0f281', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
                 (this.current <= 1 && this.processedPageLinks) ||
-                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '189f029ec26aec1ef07fbcb690c58bce6189188c' }, h("li", { key: '32959efe57c7ff493a1d3fb1f75c7c6f2826eb10', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ec984a6771777da0459f194833dd6bd50ca94d7d', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '2962bb3d7451604a3baa097b6f3ffe624a28b25c', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'ac310350a88731d6f20e86177f80c23e4ec132c1', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '06a7f463a2fb478763233c6a30c57a5f52186b82', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: '05ae094e5f561fbc52a573bc98166902fca7a8a8', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
-            this.shouldDisplayNavigation() && (h(Fragment, { key: 'cf4913427876f3f02fb1dd5a52e64cad8c826725' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '5261de2729dd37d92bb70e67ab076640f6d59b84', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '7013a952e25adacaad0c563e842e08c63029007f', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: 'f85a76e62df9db2edea74f9b4ff399b534b98b24', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'c6f67eb82e7d7d0d293a855ab9f78db120c8db28', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '39e8d8a0ed0c6ba16e690671d8d614a5b5bd7586', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
+                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: 'f4f7d5ac7ce75c6ebbff06efe1695f10fb236891' }, h("li", { key: '3552fe56d501c9b4b3967fe083cc66c096235f76', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '3a023eb7c1ea03bb47aea35d20eabb1b417d6467', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '2f66035fe1ee4a6546edf0aa3bb6250d1f3c561e', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '00aa006863cfd37c64ee8613de98046bff8d311b', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '5d16c811fab573aed0b88d4021790d75146435f7', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: '6c1241a5e9cba1367c2195808295b58cf7f197d6', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+            this.shouldDisplayNavigation() && (h(Fragment, { key: 'fe20764e7bdb381f3bd84295625aac7116e1debf' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '40cd85c84088219ec5debbaf816cba6408aac764', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '3d6fac55460757cda88c3396eac74d6005b15e7c', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: '5b6e9f5aef2df6218006b13120cf6f9cadbf3e03', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'dd18dd41e5e90639f44ccbfc9640aa88b1ad0c84', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ebc4e60fe510528a11b9db54a025dccb1e7c1a3f', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
                 ? this.processedPageLinks[this.processedPageLinks.length - 1]
-                : undefined }, h("div", { key: 'e506d8d9edd2a2c3405724feec0f171e0acacac2', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'd62d774a158f0bda48c574a9717e7a42f357bab2', class: {
+                : undefined }, h("div", { key: '29e70bbaaa1b5124d7c2e40a63e3223add9fe2dd', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '4a16b37cb12d13acb5d3ff59a3e84b07bcdfe592', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e90288259fd328203b00c05f92682d44d5842e82', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '49fad8750044ae65eba432e720a9c996201257dd', disabled: !!((this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'b47b3e1145ab9acec968a959eb2dede859183893', class: {
+                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'b544bfa7ab5c73f436a842a2ea8b6886759c369c', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'f216759c8c8a85ddfd5b503ade45223c157baef8', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'a2e0494af4a8ae5dfb712121aaeb4ce17446555f', disabled: (this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
                 this.disabled, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }

package/lib/collection/components/duet-phone-input/duet-phone-input.css

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

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

@@ -69,11 +69,11 @@ export class DuetPopupMenuItem {
         };
         // Without the role ternary Safari/iPhone wouldn't announce the label for role menuitem.
         // This is a tradeoff and now Safari announces these items as buttons and links with the label.
-        return (h(Host, { key: 'd62c7b684bbf98e2ff38ae6303e7aaad03942ff9', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '171d91b4a5f612c2b60a7c908ca0da3a0824e2fd', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '37db0ce85c42bb23dd33c522a5ebcaa174df58fa', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '8af23f7a78dc25f8d1d05adfdd8dc3bd1d489af8', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ef86e949a4bacdc7755e6e49f5814d554584a9be' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'e20daf8a4e639ab2369cc9b8f5a1c725480f60ad', name: this.url && this.external
+        return (h(Host, { key: 'd62c7b684bbf98e2ff38ae6303e7aaad03942ff9', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '171d91b4a5f612c2b60a7c908ca0da3a0824e2fd', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '37db0ce85c42bb23dd33c522a5ebcaa174df58fa', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '8af23f7a78dc25f8d1d05adfdd8dc3bd1d489af8', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ef86e949a4bacdc7755e6e49f5814d554584a9be' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '579369a5f1da1a7275dd309e163d1d5d3b847db2', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'e2dd555bf026bf0197428aec002bb0d49f532bb5', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'b9892d68a4a7d31a41d3fe3fbeac15cea7045895', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

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