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

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

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

@@ -70,12 +70,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'dc2cca9861a1e0c15b93ea6f29247986eb98d268', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'b0bf8b66f35c1edc6a61dbea64f18e3617ec2a11', class: {
+        return (h(Host, { key: '6d2ebadbdc4716a50f44a6805ec97f2915476f4e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '12c8b32f7a486ababadb37b0cb125337a4b548f5', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: '5b04a4485c4cdbeebe345e811fed2f5d5d6cfd78', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '28e164288916d963c8531ce34e627efe0f8524be', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'a2a51c2dfacdce6538b6e2c18167ec484cb6edf4', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'dccea674aa8af48ce2f6060579e9db2aa347c51c', class: "pre-heading" }, h("slot", { key: 'da7abc9ecdc0efffbe018759dd2f3cf9ade1ad49', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '65d14398e1f2dcb619b37d6a53d3af908532d1fd', class: "heading" }, h("duet-heading", { key: 'c8ef1c5e164dd0c2dfc2acd71eda724fdc35da47', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'a8bfb0a868c401aa697926f7312be6ab9d22b0fb' }, h("slot", { key: '7bb6e377adeea6912b18347369ebc4fc34a33b10', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'b1107d6d1e10090c013deb373e19968de1246141', class: "description" }, h("duet-paragraph", { key: 'cbf6175a7fa66ed210f74a172943f78737344880', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '76bef436fa234317ba71fa8609e28f3d17149afc' }, h("slot", { key: 'a18d73d7d084a5094272716c2030aeb38e92c075', name: "description" }))))), this.hasActionSlot && (h("div", { key: '5536658b8273ddfbe3ecbeec94ece54b56f9a706', class: "action" }, h("slot", { key: 'b642ea21fafd203ddbfa9dfebeb386491d09c3d2', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'caef7b4cd0f222eb2039602c241438ecdd77d7ad', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '59e3b0877935a3ea2de4010312571a89ac32851b', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: 'c27c8862d34045213fb6982cbc790c0d88d5da70', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '9ea892228de3f899f5e1031247b17d095e25e1de', class: "pre-heading" }, h("slot", { key: '4174b492f22e704b0354be13d0a178b9ef02a5eb', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8d21d1464f81c9745c91791a8857fcbe28788dce', class: "heading" }, h("duet-heading", { key: '7716f9540e3fc2638bea8ba30ce266d9f1c13390', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e2ec91a5bdc861f6f228f6e662b347c8c8b06410' }, h("slot", { key: '9d423ea6373cada2b93d47c80a897efd38d97013', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '739454e12666bfb262d6a2243d61c658189410f5', class: "description" }, h("duet-paragraph", { key: '6592dd6a78e64e89ec88a06ce89120a011c2885e', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '599855764a99fba164a1500616f5a766be168b4b' }, h("slot", { key: 'deb8f54c39068fd0a313080a14e5dfdfb072ac14', name: "description" }))))), this.hasActionSlot && (h("div", { key: '32d5c8f68c70b99cd039254054130ea149a436c3', class: "action" }, h("slot", { key: '4185c9a0f8a624e3992481fba39852335746ddbb', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -215,6 +215,25 @@ export class DuetPromoCard {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "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
+            },
             "headingLevel": {
                 "type": "string",
                 "attribute": "heading-level",

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

@@ -30,6 +30,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 28px !important;
+}
 
 :host(.vertical) {
   margin-right: 0 !important;
@@ -52,6 +55,9 @@
   :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
     margin-right: 0 !important;
   }
+  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type:not(:last-child) {
+    margin-right: 28px !important;
+  }
   :host(.horizontal-responsive) .duet-label .duet-label-content {
     max-width: 100%;
   }

package/lib/collection/components/duet-range-slider/duet-range-slider.css

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

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

@@ -109,6 +109,9 @@
 :host(:not(.duet-m-0)):last-child, :host(:not(.duet-m-0)):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(:not(.duet-m-0)):last-of-type:not(:last-child) {
+  margin-right: 16px !important;
+}
 
 @media (min-width: 36em) {
   :host(.duet-expand) {

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

@@ -84,7 +84,7 @@
   z-index: 200;
 }
 .duet-slideout .dialog .top-container.has-sticky-header-slot .top {
-  background: rgb(240, 247, 250);
+  background: rgb(255, 255, 255);
 }
 .duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header {
   display: block;
@@ -118,11 +118,16 @@
 .duet-slideout .dialog .sticky-header {
   display: none;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 0 20px 20px;
   margin-bottom: 20px;
-  background: rgb(240, 247, 250);
+  background: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(212, 223, 229);
 }
+@media (min-width: 36em) {
+  .duet-slideout .dialog .sticky-header {
+    padding: 0 28px 28px;
+  }
+}
 .duet-slideout .dialog .items {
   display: flex;
   flex-direction: column;
@@ -168,11 +173,7 @@
 .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(198, 12, 48);
 }
-.duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
-  background: rgb(245, 247, 250);
-}
 .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: rgb(245, 247, 250);
   border-bottom: 1px solid rgb(222, 224, 228);
 }
 
@@ -200,12 +201,8 @@ slot {
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
-  background: rgb(253, 247, 242);
-}
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: rgb(253, 247, 242);
-  border-bottom-color: rgb(251, 225, 209);
+  border-bottom-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) slot {
   color: rgb(23, 42, 59);

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -188,11 +188,11 @@ export class DuetSlideoutPanel {
             }, style: styles }, h(FocusGuard, { key: 'ad7c4a34db3120b40ed51061125f05d69017b342', moveFocusTo: this.closeButton }), h("div", { key: 'af56281cf6a0a4c7355f48d17b66c5495e7982f9', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '676eca91428ce8439e68da74b59a0bc8d393f5a5', class: "top" }, h("button", { key: '2d8f3d984de8ca1efccc191115b7657a455c5ef9', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'e2a19bcf68d13caeec8cd0d03e79d8f347436f84', class: { "close": true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '5e410d780eed931181591dd44c6d5d6281096edc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e798417e14455bde09f3ad7e27d204990b2b6d17', class: "sticky-header" }, h("slot", { key: 'bdafb4122d5c49b37933244930f66b1a171d9641', name: "sticky-header" }))), h("div", { key: '807f98f59416699cda295c7e2939faa6241e87bd', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'f4edf9a9df667475a3c00b214e134bce7d9d7ae9', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '548ed5fadb9216137fcdc0762b35454ceb21c8d4', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '923603a20dbab28d51a376a9c252c35e33803880', class: "sticky-header" }, h("slot", { key: '07e15709effbee9950d36f03dd91e73b7e9ab336', name: "sticky-header" }))), h("div", { key: '7e63e1cd014106736bb712c20023f62245e43486', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'a4239425381aff3fe79c099a7a0d471377cfc475' })), h(FocusGuard, { key: '7861bde566dea39216e74ae0a7b37e13d92562c3', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'fa18b91a1114433c57ecd566934f505e9fc62cf5' })), h(FocusGuard, { key: '7251452b17bbdfd8978f302bfde0e33991b39465', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,18 +14,6 @@
   max-width: 100%;
 }
 
-:host(.duet-theme-default) .duet-spinner {
-  color: rgb(0, 119, 179) !important;
-}
-
-:host(.duet-theme-turva) .duet-spinner {
-  color: rgb(198, 12, 48) !important;
-}
-
-:host(.duet-custom-color) {
-  color: inherit;
-}
-
 *,
 *::after,
 *::before {
@@ -56,6 +44,9 @@
   transform-origin: 0% 0%;
   animation: duetRotate 0.6s linear infinite;
 }
+.duet-spinner.duet-theme-turva {
+  color: rgb(198, 12, 48);
+}
 .duet-spinner::after {
   position: absolute;
   top: 50%;
@@ -97,6 +88,6 @@
     transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);
   }
 }
-:host(.duet-theme-turva2) .duet-spinner {
-  color: rgb(230, 23, 64) !important;
+:host(.duet-theme-turva2) .duet-theme-turva.duet-spinner {
+  color: rgb(230, 23, 64);
 }

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

@@ -3,28 +3,20 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSpinner {
     constructor() {
-        /**
-         * Color of the spinner, as a design token entered in camelCase or kebab-case.
-         * Example: "color-primary". This property can also be set to "currentColor"
-         * which forces the icon to use the CSS text color of parent element instead.
-         * Useful when you want to control the color in stylesheet instead.
-         */
-        this.color = "gray-lightest";
         /**
          * Size variation of the spinner.
          */
         this.size = "small";
-        /**
-         * Theme of the spinner. When used this will override the color setting and
-         * use "primary" or "primary-turva" as the color depending on which theme
-         * is chosen.
-         */
-        this.theme = "";
     }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
+        // NOTE: for backward compatibility reasons, if no theme and no color is given, we default to "gray-lightest".
+        // Changing this would be a breaking change, and we do it only when we have other things to break too.
+        if (!this.color && !this.theme) {
+            this.color = "gray-lightest";
+        }
         inheritGlobalTheme(this);
     }
     /**
@@ -32,14 +24,11 @@ export class DuetSpinner {
      * Always the last one in the class.
      */
     render() {
-        const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: '02a74b72a4b22798ac1a768e41793ee920494ca0', class: {
-                "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
-                "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
-                "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: 'e4d1b98fbcdc05241e8ea87fe91a944be89d1bff', class: {
+        const color = !!this.color && this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+        return (h(Host, { key: '0d9ba3a785f72e0bd9318f4b38bc5b5459075704' }, h("div", { key: '5fed4253f83731359bfdf0a5b266b2352354b1cc', class: {
                 "duet-spinner": true,
                 [this.size]: true,
+                "duet-theme-turva": this.theme === "turva",
             }, style: { color }, "aria-label": this.accessibleLabel })));
     }
     static get is() { return "duet-spinner"; }
@@ -78,7 +67,7 @@ export class DuetSpinner {
             "color": {
                 "type": "string",
                 "attribute": "color",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
                     "resolved": "string",
@@ -94,12 +83,11 @@ export class DuetSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color of the spinner, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\". This property can also be set to \"currentColor\"\nwhich forces the icon to use the CSS text color of parent element instead.\nUseful when you want to control the color in stylesheet instead."
+                    "text": "Color of the spinner, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\". This property can also be set to \"currentColor\"\nwhich forces the icon to use the CSS text color of parent element instead.\nUseful when you want to control the color in stylesheet instead.\nNote that in earlier versions the color has defaulted to \"gray-lightest\", but\nin a future release it will change to undefined, so that the color will be\nthe theme's primary. If you have relied on not defining color to result in\nwhite, it is advisable to update your code to explicitly define it."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "\"gray-lightest\""
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -146,12 +134,11 @@ export class DuetSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Theme of the spinner. When used this will override the color setting and\nuse \"primary\" or \"primary-turva\" as the color depending on which theme\nis chosen."
+                    "text": "Theme of the spinner."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "\"\""
+                "reflect": false
             }
         };
     }

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -305,10 +305,6 @@
   color: rgb(45, 52, 79);
   background: rgb(234, 235, 239);
 }
-.duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  outline-color: rgba(199, 202, 207, 0.8);
-  border-color: rgb(222, 224, 228);
-}
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
   width: auto;
@@ -507,13 +503,6 @@
   background-color: rgb(113, 118, 132);
 }
 
-:host(.duet-theme-turva2) {
-  /* Plain variation: divider nude, hover & active underlines red */
-  /* Base tab button mapping + selected underline red, outer borders nude */
-  /* Default variation selected underline (uses ::before) should be red */
-  /* Default variation focus-visible border stays nude */
-  /* Checked variation selected state */
-}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-group-tabs.duet-tab-variation-plain {
   border-bottom-color: rgb(251, 225, 209);
 }
@@ -528,12 +517,9 @@
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button.selected {
   color: rgb(23, 42, 59);
-  border-color: rgb(251, 225, 209);
+  border-color: rgb(212, 221, 226);
   border-bottom-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
   background-color: rgb(230, 23, 64);
-}
-:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  border-color: rgb(251, 225, 209);
 }

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

@@ -120,7 +120,7 @@ export class DuetTable {
      * Local methods.
      */
     copyHeadingsToCells() {
-        if (Build.isServer) {
+        if (Build.isServer || ["none", "none-scrollable"].includes(this.breakpoint)) {
             return;
         }
         const headingElements = this.element.querySelectorAll(this.headingSelector);
@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'f7fa5871fe4bbfc89ec3683ad0d4d9824fb9347a', class: {
+        return (h(Host, { key: '02ed0a7f4b3c7504b0f6df2ee9e923f5afbca106', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '0bdd203be920ca5f48f82473ce69f63d0ee3aa86' })));
+            } }, h("slot", { key: '946a620f959caf19dc712844d81ebc345870757d' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

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