@duetds/components 9.18.0 → 9.19.1

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

@@ -5,6 +5,7 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 export class DuetNotification {
     constructor() {
         this.language = getLanguage();
@@ -42,12 +43,18 @@ export class DuetNotification {
     async setFocus(options) {
         this.linkElement.focus(options);
     }
+    getAriaLabelText() {
+        const slottedElements = getElementsFromDefaultSlot(this.element);
+        const slottedText = slottedElements.map(e => e.textContent.trim()).join(". ");
+        const indicatorText = this.highlight ? `${this.accessibleLabelUnread}. ` : "";
+        return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
+    }
     render() {
-        return (h("div", { key: 'd277f46ce75b675a1b2dc80863ab5c6e79608d77', role: "listitem", class: {
+        return (h("div", { key: '5818ed344341a4a8b2f3924c5bebcdb32fdcb624', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '64c9209bdab15027121f6c52ef86327ce415f685', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '9fa32762c6c1805a3c15d1a57f5882c82d36607d', class: "duet-notification-container" }, h("div", { key: '80bb71a20d0c3f7c23d455758025b080e128ca35', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '4ea88060a28ed5abad5ff09dbf9fcdbab758bdf9', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'b3c53a5318b7dae17185948ba480ee2665e8f67e', class: "duet-notification-content" }, h("slot", { key: '88463f9aeca48107382f18f377132015ef037115' })), h("div", { key: 'cac28a3e91a692ae7ad32bdb95768b1c39141c54', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'bc48f0cc673e62d599c92bbfe62e9d2f071aa218', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: '225bba19f4b8e4f6904260d8c482af31e0615ea7', class: "duet-notification-container" }, h("div", { key: '00719c35eecb0f2073532b13d6baf67f15dd6313', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'b2cca7dafc46f20de25127773a7c02c377e46bde', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '8d950debef17e307570eaa36666de6a0e0347bec', class: "duet-notification-content" }, h("slot", { key: '7d672776e4e826fee3deb51f83fd4d7626a32d5b' })), h("div", { key: '01fe9a4420c8cdfd4943e42b17206a1a1380588a', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

@@ -40,6 +40,9 @@ span.flag-container {
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type: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

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

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

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

@@ -18,6 +18,7 @@ export class DuetPromoCard {
         this.backgroundColor = "";
         this.textColor = "secondary";
         this.image = "";
+        this.imageAlt = undefined;
         this.headingLevel = "h3";
         this.url = undefined;
     }
@@ -53,12 +54,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '8f689b5d1894c5e0662f73aea0aed2b93d693d72', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0eddae7614061bf37233ab26b7c5ce7960961cc6', class: {
+        return (h(Host, { key: '5db726b68b809f97f14a3467450a2f49f843fc26', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'e6376438c48f2b524bfa7bf9d2bf70fc5b28704d', 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: 'b2e8ca1f06923cab98d7336c7062c071bcfc261f', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '0a8ce33fc1051205cac9d8d2ac24bfa073848343', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '5cc34aee907a48571fef7d7702940c56a456f109', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'a832b2964afdbc503fe20c3b1cc9e06ad503639e', class: "pre-heading" }, h("slot", { key: 'cd32235d60380db53c044df70c45ae0fab54ab92', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '01d5f808a6d8df027cce500a243244a77f22d4bd', class: "heading" }, h("duet-heading", { key: '432e098ec916ea2cfb50f5c3b227ccbc79cb46ae', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'c21c360ec6e50de46c62b62e8719588296ce48bf' }, h("slot", { key: '8643c8b20cb1d3aa6bb48c0bcf79f4bcdf7626f9', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '8220fc6e3a21f9434d962321afc9ba95d6095de8', class: "description" }, h("duet-paragraph", { key: '3cfd920c2aaed2185d3869e0f22a5b8c79dcc830', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '83121871c669e008e8e66cfc3235b5e2a9bfa774' }, h("slot", { key: 'ace270926c69c31b27b91abae993671179aad975', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'de50b7e248230d0497635d62ca93c98a6bb25391', class: "action" }, h("slot", { key: '31ccf2f4a58b5b5cc025ca3c6598cebea6391947', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '7f304f15bebdfe79900852a6aba03a7e246db723', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '56f330a9a72f23f170988c716a5d067d76244b2b', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: '9dd3fbc5a0c89814627f30c37ca69b93ca2eafa1', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'c379a463b221d9946a02a63ac6d59ac5901e1096', class: "pre-heading" }, h("slot", { key: 'c58f528aa6cc8ae1887aed1389f1e15e4f7ec9c1', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '9157351d7b73b65f1748d45b283a3131d37c2293', class: "heading" }, h("duet-heading", { key: '9ba42bb9bec713248092a02b9edd9a77a3851e55', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '5015aaefb8aa7a37f8ddcc418c4e629ddbdefed6' }, h("slot", { key: 'fc40e048fe10cf4203ee1b2ce94bf61c80452c26', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'a60704e5d49ac589d9c5523fc76229a96883629c', class: "description" }, h("duet-paragraph", { key: '7772d59bb44c93af12e75a3ee2f89585b759990c', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'a13c4ba356631d7e2363f75edfe80f3341cf7947' }, h("slot", { key: '7fae60137c29d9e0e20a14c457f55af8af3cfbac', name: "description" }))))), this.hasActionSlot && (h("div", { key: '8184539fd2f9c23cad0224f170e9cc3a43d15a59', class: "action" }, h("slot", { key: '32a398ea1a2b09bde94a2dbb1d2a954ed62097c6', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -198,6 +199,25 @@ export class DuetPromoCard {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "image-alt",
+                "reflect": false
+            },
             "headingLevel": {
                 "type": "string",
                 "mutable": false,

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

@@ -31,6 +31,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

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

package/lib/collection/components/duet-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

@@ -168,11 +168,11 @@ export class DuetSlideoutPanel {
             }, style: styles }, h(FocusGuard, { key: '84d9b40827aa1b8e5651febd8a9e0b7af206bd21', moveFocusTo: this.closeButton }), h("div", { key: 'fb989b818bcdccacda4bd975a71fabe74bf07e17', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'bdc79ef4c0ca28dd92ac8808ae32142beeb68e68', class: "top" }, h("button", { key: '247fed3b9148060448c542e038a64b45ecb229fa', 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: 'c019deaf0645e494c2eb6c3348a804490a904ce1', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'f9248737a100ea05c07aae78f30c2e4f606eb85a' }, this.label.innerHTML), h("button", { key: '64f1f447c272650ae5d82c77a3f7d90f6a411cbd', class: { "close": true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '3737094efd584ea8792fb742f1871984f099e761', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3fc932167f02adea970a4477eab2eea93e2c8db3', class: "sticky-header" }, h("slot", { key: '835722e1ea03d08dc53d674d2170844e582bb414', name: "sticky-header" }))), h("div", { key: '70131a1615c354acf6f46c6eca1116116960f8c6', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'c019deaf0645e494c2eb6c3348a804490a904ce1', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'f9248737a100ea05c07aae78f30c2e4f606eb85a' }, this.label.innerHTML), h("button", { key: '4803d320826b236f69afd59725624bde8c1bcded', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7efc43fda5d8b57021311668b0826bc75cdd40b8', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '277cc062b3554cd86e65b194a4b39b02aba5cc13', class: "sticky-header" }, h("slot", { key: '97a1bd11b146783916fd3b36fe3243e654ab4455', name: "sticky-header" }))), h("div", { key: '1e9156aa7213dc1b13d3739f7658f4249dc0b4a5', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '4a3b4ec54bbde2ec40c4184e2f8cbcb5030c507b' })), h(FocusGuard, { key: '5cb519614160903a84503fc21ab428518004f284', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'c6bd7aba4dd5ac41e8178ac9b82ecae39cd5ef36' })), h(FocusGuard, { key: '201924a978637ae1bb37fdd05cb7cb73479bba1c', 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

@@ -4,14 +4,19 @@ import { getColorByName } from "../../utils/token-utils";
 export class DuetSpinner {
     constructor() {
         this.accessibleLabel = undefined;
-        this.color = "gray-lightest";
+        this.color = undefined;
         this.size = "small";
-        this.theme = "";
+        this.theme = undefined;
     }
     /**
      * 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);
     }
     /**
@@ -19,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: 'feb500dd4e62ad66f8d1caed2c882a89acddc938', 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: '9483e2ed54fc623f7ae129808bbd88607c0de1e2', class: {
+        const color = !!this.color && this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+        return (h(Host, { key: 'f754e35f6f4360131372e47d282605930fad93dc' }, h("div", { key: 'da3035f70914e76c61b7c5671f44035fb3142d18', 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"; }
@@ -64,7 +66,7 @@ export class DuetSpinner {
             },
             "color": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
                     "resolved": "string",
@@ -80,13 +82,12 @@ 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,
                 "attribute": "color",
-                "reflect": false,
-                "defaultValue": "\"gray-lightest\""
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -132,13 +133,12 @@ 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,
                 "attribute": "theme",
-                "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

@@ -89,7 +89,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);
@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: '147da4a8e086100e74e07d3bdb773b73b53072ec', class: {
+        return (h(Host, { key: '60568b2332d2868d1f825e319d9b12394a27dd5d', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,7 +122,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: '127854a0ecfcd4b3debf08383af581e80dce62b7' })));
+            } }, h("slot", { key: '25f15e4530b23ddc5e1a9e27425425a94cab8bf4' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

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