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

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

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

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

@@ -32,6 +32,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  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)) {
@@ -552,7 +558,7 @@ label.disabled .duet-checkmark-container {
   border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label {
-  background: rgb(253, 247, 242);
+  background: rgb(245, 246, 247);
   border-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
@@ -573,7 +579,7 @@ label.disabled .duet-checkmark-container {
   border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-info {
-  background: rgb(253, 247, 242);
+  background: rgb(245, 246, 247);
   border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-checkmark-container {
@@ -583,7 +589,7 @@ label.disabled .duet-checkmark-container {
   border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-info-toggle[aria-expanded=true] {
-  background: rgb(253, 247, 242);
+  background: rgb(245, 246, 247);
   border-bottom-color: transparent;
 }
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -36,6 +36,9 @@
 :host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-link-button):last-of-type {
+  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

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

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

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

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

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

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

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

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

@@ -394,32 +394,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4538c13203031ba738afe31bf944d5e5cf0822d0', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'f74353d0266706e3e98ba2eb0ffd427e17dd7d32', 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: '52e784473ef29848499981e51ce1306b85a6982e', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'c6bb124db6d838e10370f48544b86a9f7619b0e9', 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: 'ef1c5623374551a2f397f3af374da758f18d32fc', "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: '952121198f2ef45be88514aadec01a5c96f3533d', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'a20aba22fa8fb86c7f85d2f53806d1ca4617f7a2', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '5796a23be63400e02cdcda3547ba16b5095efb2d', "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: 'ae244394fde7f973460ad58c73b0188c2a4fac47', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '8d0eb963238e39d216193a48562142b3be082cbb', 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: '9a3b326a61e687c37098498586030cb657abfe50', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'd7e1fda8280ef37a4e6a9a035651faa3812dd609', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd09d305229036887195250ff68758d8ababcba46', 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: 'd894e457eb0d8a85407e2ff58336c515efc36b32', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '286dda612fa7b6f2149f75dc57124d5eb6decdb2', 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: '7dda62b7807922dcef3cd2d16f0bc66bfe134ea4', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '608048896bdefbda08da9a074e885be4619213a5', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e2274296bc1bee4ccc388c0db9bb0d93d24c835b', 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: 'c61298ec08d9d456084704599138fa6947b90f5a' }, h("li", { key: '353c539572913f5c79da697cbbe5904424b66451', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '3fc0820a55c18784babaa94cc582742d7f7ce81d', 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: 'b4f8be4468d0c1fb1e45eefe35d0d25a8e35cee5', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '3d2bcf407aff2366deac05bdbc9e02162a1634ea', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'cb9ae00667627845552094b399840bf08a76c63c', 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: '39ef13340bc1908984d40d1f428e0e541a346a38', 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: '3c2d5586ebf42d2c8fd8f651bae865e4bb7a61bf' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '3ff93a876610de4018caa32e8a0836bc93174408', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '6febe996395f01852e2fde2c454f5a296e395141', 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: 'd010e340fc4dd341ca566109f5a1c38a89857411', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '984d35d520c9b995ed48c7fbc7a58bfd8c89357d', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '5bb07665b261db54475de478bf2f5fb974ee4047', 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: '3f9b85167c0a76403aa15f29f1c1f1288ad0e4d0' }, h("li", { key: 'e64af2416ffc7613778f7da6cb788d4a72f4eef0', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ed827f262c1d9672d8a0da1209d214cf0201c14c', 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: '123675ff6455a2af26041f5887226e4c0ae2e92d', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '937ef0dd5be48ea9cc25e0d76183cf871435fae1', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'b943f95c41d2325cbc8f4ee8654feb079f0bde26', 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: '0abefda80e80fd7299d0e6b1a6d474f5f0a004ab', 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: '20184dc0cfdf26f29d63dcfbfe1ae2c4837a56bc' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '6bb0d7a4742be774e7b453dd091b8ec9bc4ddb68', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '5a6c286824409fc75f08fcb2c5144bbeb19d95d5', 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: '8b8bb2c2b47d687d20e556840d5960dab27c90b6', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '762f4434753385d3599f159d62ca921def9a18a2', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '5dd3404fa6a43253b611c8c35045041136a9241e', 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: '559d8dd4a0f63d440523de1ff4879cbcd8bca408', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '9c986c1207ec4918758a931d009d48708818e736', class: {
+                : undefined }, h("div", { key: '8e3876cbbbf37cd2f2e2e3cc527b5553479b3e18', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '68e1f7e8c908396d2564d1fb30880d726dea24cd', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'c8f4048dcf9cb28c6bd4d43c1d1945c2da15ce50', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'edfe5c34fbdd5406dcb10355ef7027da35279af2', 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: 'f605fc50e28b58a780fa938885031353088d1fc5', 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: '69ace8f9afc0c82112a6ac194d7fc5ef5041f179', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'da162ed3e9a0bb469be3670395bccda489aeb97a', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8ff4d39efec69737f39608581d72bfafc174a513', 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

@@ -101,11 +101,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: '69c44a1d58780969eb4ac52879cd12d91f138a54', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'b4a7e9fc9c862bd2ef7e82abde09d9454e9b1585', 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: '8a4412f1d2aa25c099780b3441d4ed06699fe987', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'a08f5aef8339a1c96e16c05f87cf60bf0fda3a0e', class: "duet-popup-menu-item-label" }, h("slot", { key: '1ccdab3f89ce6fc1ce8222e7219c6d68f99ab61e' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '0f2158f8bbbda5ef74e8b559d9c7399c15ec67b2', name: this.url && this.external
+        return (h(Host, { key: '69c44a1d58780969eb4ac52879cd12d91f138a54', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'b4a7e9fc9c862bd2ef7e82abde09d9454e9b1585', 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: '8a4412f1d2aa25c099780b3441d4ed06699fe987', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'a08f5aef8339a1c96e16c05f87cf60bf0fda3a0e', class: "duet-popup-menu-item-label" }, h("slot", { key: '1ccdab3f89ce6fc1ce8222e7219c6d68f99ab61e' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'bd891c106163c5bc13ae83420199b2ec6108c1c4', 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: 'bdce9e7ce0ae1db78450e59113a6a48de13ef306', 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: '4c88625e8599b8ef038cf37236e8be4c06aaf3e7', 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;