@duetds/components 10.6.0 → 10.8.0

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

@@ -338,14 +338,13 @@ export class DuetModal {
         var _a, _b;
         const iconColor = postfixTheme("primary", this.theme);
         const closeColor = postfixTheme("secondary", this.theme);
-        const closingButton = (h("div", { key: 'ec2c3a88ed4381cdfe04d5e09c6973f50926938b', class: "duet-modal-close" }, h("duet-button", { key: '3ba54ca9d928a311351d7daccfe20c1a94dcb6a3', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        return (h("div", { key: '44ad4e8bf6516da0e6350649f8e4cae009f7cf07', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        return (h("div", { key: 'b2154a3b1549e84c7bdbc822f5ac8a38e8504a35', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? undefined : "true", tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: 'd2eb31d5195cced7a59ca29dbd2e2f0ef84e2655', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '4703b85e9d49409f26720fe00b270370afa97f76', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '36662031598a265fddec54ebcdd7d4d94e7b8625', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '68c59b43722015abb8936e559cdac7dd6aef6fe7', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -356,22 +355,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'caa7a84911505b70ffe1e15ea73bd4489eac49e2', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
+            } }, h("div", { key: '01ea6b1e9120c277f00937fdbcd41f8b7c956700', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'e9d16355dbf2de5937a1a3bf5fa7e27833270238' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '9d9ef9ea5b47d2107b49066c1d156c886fb6f972', class: {
+            } }, h("div", { key: '485e05e90114ba206285807ef6e5b0b704137254', class: "duet-modal-close" }, h("duet-button", { key: 'add58ae26c95fe8d4f1f1f9b1320de78e4a08c02', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), this.hasStickyHeader && (h("div", { key: 'a00dc00eca76a103b3b8e144beac8df904bd2a27', class: "duet-modal-sticky-header" }, h("slot", { key: 'd199b48814c854359c3792f967e6e9187bf9d2db', name: "sticky-header" }))), this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'b175ca528a46801e52bbf75a7fb35c4736a986ba' }), h("div", { key: '524aa776ad9bb4bbf48e921d0c71ca25eb71e28d', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "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: 'be0b90e2577c2760b6f95200a917649cd6b35287', class: "duet-modal-header" }, h("span", { key: 'e2dd5ce0f9609e9fc096ad49e9d6d0ee2a01699d', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'dbc67d9fc55310cabc65484b4518b8cadcfef874', name: "top" })), this.icon && h("duet-icon", { key: '095d2b5e9b29cf0a849711b7472d424731d9d36c', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '3cdcdd876b89be930fb67d715a0873f9305b787b', "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: '3d5cd64a2ed94e45180836515083f8885295c4d6', class: "duet-modal-spinner" }, h("duet-spinner", { key: '693a9b5947855ff18c0f3089a3b437ccb543d9d0', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '9b07821006bf82a6707579789376d42febf652b8', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '90be2af349ec10c2d5ae55be8e74e50cd8032e30', class: "duet-modal-header" }, h("span", { key: '6150e88c970678165ee100eedad0938196b5e0f3', class: "duet-modal-inner-slot-top" }, h("slot", { key: '171a28abe15da7ae258d411b1a552b181b825749', name: "top" })), this.icon && h("duet-icon", { key: 'cf52aeafd15ebfc0e71eb8573a08330bfafd6cbc', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '706973f2ff5fa09a241907a48ec001fb6df3efe2', "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: '8670545fd3e1ada7916a39dd3617ebf7797fa6ce', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'ae2f19a4913255f1ce6263e0003482bb72b6bfae', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '8e1a2ca420d09f50e2cea2104aade7d9e7062ff9', "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: '0008beb6b6f6bac06c6ce3dddb661157dfedf4e1' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '07830d94eeb317030caaa0cd706ebf1ef6a8e578' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -273,23 +273,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '4b8d1905f6d83802479254ed818eddc225a07884', class: {
+        return (h(Host, { key: '0710656376962142671b6c65a3d0c8fa0bfdde17', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '5448159c21e1975424169c66faa9442471e97390', class: {
+            } }, h("div", { key: '690b2414fdae1630e4a55a9ce2e9f5dc540cc435', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '572ae7df62eeb7870c958fa8812a032f685252c1', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'd6ce07a6fe3994af5ff7e8639febe7380738853e', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'cabbf0070861de762ff0e7b1fa390fc021c6e56c', name: "tooltip" }), this.caption && (h("duet-caption", { key: '501998a95ac97a8e41aff3f77bb3caef192dcc07', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'c32972b8bff8afd700203c2906a1b49b7656555f', class: "duet-multiselect-wrapper" }, h("button", { key: '07e7b36d4264aaff222086f518aeeef2c1f9e7d1', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'aaa61bce02a50eca851f48da7ee461474bbae0f3', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: 'b869479691f3a394d89f8720efd7868c13f5fbec', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'fcbb5b6dd4b0dc6f4abae50aec12eb21da92d0f4' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '68dc4a3ad25722f3a39628147244ce459a17d6c5', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8aeddd5a385ca37e54869993b90bd1838449d526', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: 'f46a4bb216b778776acfa1aff5a9867afa236789', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: 'c469c416d065e20353425c33cc235e356a9a9ac0', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'e586ad708e105267607b2e41b36937c4df33bdf4', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '86ac648e522c69ed6f761940c536cbc8c6d89c37', name: "tooltip" }), this.caption && (h("duet-caption", { key: '084247996400fa2100ec5aae3ccf81e46a95488b', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '2e769d052bb05ed162c5a4d5c855b71ec543aa22', class: "duet-multiselect-wrapper" }, h("button", { key: '221b22293ebe302ae76087c3808a13240bab1bae', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '8d39dc569c01d388470dd25e1e51099add2b7bdc', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '6b646cb3cb2d53c003ab4bd0fb12373784bcff15', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '2f19ae5e9cef683c2c776e3a52cc6308ee25fe22' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: 'f6731917540f67b11f344b7858feae85a2a40ef9', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '48f40a7f7d0c45d6f11f1eb4ae609aa111f40c22', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '8edf93a17bb06302959feaa6f37dace7ff6310d6', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '3907f7054436f56ed50866ab0e191c00c2dd17d7', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'e502215643ea66e08be0b55c3ba1deeed79bdaad', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: 'a63b642a9e24bc18d88e567f1b6c480f074ad578', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '54ec6623e55b9282483a4217aa635d8c26f5e54e', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'ab167f22d9064dd059c36e115b069813894c2985', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: 'a3f5536268c911481c9330135467a32489fe74cb', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '221b275486bef481c990d6625bc92120cd452e83', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '022173402cfe3a2facde3bf6f9ba63c22b68a949' }, this.error)))));
+            })))))), h("span", { key: 'f669eea3585579caeba9b0549367509f85db35ad', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '32a00ccdd2e45db427a87dbabb707960b734df4d' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5d770ae8af90d4342a6a057ece21ada25ba64f63' }, h("div", { key: 'fe2a1611fec8c6a234c25a13e24d732cc0cf4511', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'c7bad3186de463ebf1a3b1411b299cf59f16df0b' }), h("slot", { key: '77e0e221d53ce3d3addf52cdbfe06e5fa55b38b3', name: "mobile" }), h("slot", { key: '691b0c5b905950d7218633ffedc1094e7b1e7946', name: "desktop" }))));
+        return (h(Host, { key: '328e6c0b204e81ba8492e09f3c99e51ccf54b3c9' }, h("div", { key: 'edbf3c6c3e7e66ba961ef76306be8e57bb379c82', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'beecebafa68e4eecf50fed6d2f66161fcf9ad4f9' }), h("slot", { key: 'e86611d1f874f7fecef786352fb2485465fea16c', name: "mobile" }), h("slot", { key: '614a8c925539ca4fb8820a5dbcea8a17ec0326ae', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,11 +79,11 @@ export class DuetNotification {
         return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
     }
     render() {
-        return (h("div", { key: '457e94b4a6853aa86a9cca92506b7aecc31aebd9', role: "listitem", class: {
+        return (h("div", { key: '0755007d365b224053afc86e8ffedecc29f6de2b', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'e011022f39bd5e719c9cae5ec54b4233f1bf9fb8', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'e2c33d869adfc549195685ad1bbd1e2d5c4370b2', class: "duet-notification-container" }, h("div", { key: 'e491caeba677f8e78da287b50621e33be6519753', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '4cdf556b6b6354da2174ae00af435199aa2dbe94', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '942680343125bc34098440f5fec8abf5db5fb4ab', class: "duet-notification-content" }, h("slot", { key: '63a85af1051ad93c0569cfead2f104c32f446b7e' })), h("div", { key: '08dcdffb37beef2796ba05ae48a233badf652ef4', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '97d9d1acc01c8cf58e0e668785678cd019b1dd74', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'faa07470a724ec22d342404194c16acb4e8b4cb9', class: "duet-notification-container" }, h("div", { key: '1d39f1cfafc46c55a644524fc510b26fdb6e6ebd', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'bc0b9e295f7c6915e5199c46ecaa86df05fd5d5a', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '46714b76ca2114f2c17cabae75faf1cf50729ada', class: "duet-notification-content" }, h("slot", { key: 'c8b0b56c6c9dc513634ac81f5607b4a7c9ef57ef' })), h("div", { key: '1266253fe3753d8f8a652e0cbc35615743ed026d', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -126,13 +126,13 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '69b878842a591a528c9c8218abb3dae14e995406', class: {
+        return (h("div", { key: 'f64474d7b1fc293f9f84b46af781474adc8e4e12', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'b430067e1fdca09a1c6ac0e162be9e2d5acd434f', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '3a50f54565c35db0bcef5b227c931f476ead3aef', ref: el => (this.drawerButtonEl = el), type: "button", class: {
                 "duet-drawer-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '55a526c885dc7ea660730e97fdc25fe0943dd2e2', class: "duet-drawer-icon" }, h("duet-icon", { key: '37e3d9b20ed6f54da0a1445a76b68dc4dfa0b308', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '90c45774b6cf888241d8d82c35380d05692106c6', variation: "change" }))), h("span", { key: '92725e4a7119dbc5050599fefe7a17871b2f6d81', class: "duet-drawer-label" }, this.label), h("div", { key: 'ba9fad66fc02ccf040d048a9d9706fc29b5d31c7', class: "duet-drawer-caret" }, h("duet-icon", { key: '6e631282017345e59c7b7acdf7ccfa713d4a3bd2', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '15342aa1db7638af746efb9401483f38f5d34b0f', id: "duet-drawer-content", class: {
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'cb9054a5811f6bb303959c289fa7b05598f80a9b', class: "duet-drawer-icon" }, h("duet-icon", { key: 'ea93e752d5e5fa5151c358243b3d0f21c3398ea8', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '2fa021b5e7ca70fc63211f03e648cff1af6a6681', variation: "change" }))), h("span", { key: '517bbd72489ea86aaf16740f5e76057a0905a633', class: "duet-drawer-label" }, this.label), h("div", { key: '35018504fde6cafc82064c1ac372866843b0851b', class: "duet-drawer-caret" }, h("duet-icon", { key: '83ef07800bb0117286b89a88f923003cf4ca7841', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'ffc7ff35e445368c50fc98555f4147b541efd0d0', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",

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

@@ -394,15 +394,15 @@ export class DuetNumberInput {
         const identifier = this.identifier || this.inputId;
         const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: '1e1ec1d4970da103cdd9fbb867e469e414365adb', class: {
+        return (h(Host, { key: 'dd6481f3c9a5c1db3d4e4edf06120a79f015d33d', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '43bfdda224ef424c81d08a5bc5285348124dd6a0', class: "duet-number-container" }, h("duet-input", { key: 'aa962811d9d95fc08a8211f3bdbb94cba87f0924', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: 'd0692236e001777d3e384ab54a02449d38e7cd44', name: "tooltip", slot: "tooltip" }), h("div", { key: '493fa102da11525ac2688c4ae163324cd0b244d1', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'f6cfe72311cd6d5723471f72fa06d3c6173ac0cb', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: 'caea39a259e4ac79fc5c086f92d6205c96bfe081' }, this.accessibleSubtract
+            } }, h("div", { key: 'd6c82f4b745801cd2ae8f256c7bb3f7442bd6949', class: "duet-number-container" }, h("duet-input", { key: 'e4de66a5437265772070627b0cf72ad92218dba9', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, caption: this.caption, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: 'e1ebed47dbb766a2b12d71650327e1071f776f97', name: "tooltip", slot: "tooltip" }), h("div", { key: 'b5d814557b3cb9ab4d14afd5afca0d2e7b583a5e', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: '1f0d70579892176f9785c6954e9e8c937864b4b2', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: 'ef5fc7aa7e3d4aa2780eac64dd6794488af62d51' }, this.accessibleSubtract
             .replace(/\{\s*step\s*\}/, `${this.step}`)
-            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: 'ba9ad012c760bb989ab3b2d4c12209f4a0c3555d', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: 'f1c5f085b3d18b1f4f48c2a8c59ef8a945d9ee32', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: 'ee5a3d12e54e5523cab33865e148455e385e2082' }, this.accessibleAdd
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: '3c5d74395785f44aaf71b2390a30158865d27ad5', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '5e0fd58cc1ea01f45694f26f14616e22b5984cf7', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: 'b952bdea56d58c9948847ad27d0890e543b5cee8' }, this.accessibleAdd
             .replace(/\{\s*step\s*\}/, `${this.step}`)
-            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: '1f2597d788f3738c1ffd0b6a4564b31546238228', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '0bc549da309c663646b90e88329a755f0bd96a8a', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: 'e5c4f242dfdb36d1935be12d716f622e6d5a7570', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '2e82bb69f5103762366ebc7d600820849c56ba08', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -991,6 +991,25 @@ export class DuetNumberInput {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "caption": {
+                "type": "string",
+                "attribute": "caption",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption shown below label, also included in aria-describedby"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "max": {
                 "type": "number",
                 "attribute": "max",

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

@@ -59,7 +59,7 @@ export class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a962e9115a51fcbb322726c314b96e3dbc92920e', "aria-hidden": "true" }, h("div", { key: '6d648d8dc0e371e27900f612a79dc943e3087005', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: 'ede75e9192a5cc0ae1db5e70f9f1e1623654b5c7', "aria-hidden": "true" }, h("div", { key: '12684840f86edbf45b811415a637a7c26101ae31', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -56,15 +56,15 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '52d02a4dce3ed0bfe7d0281e536c14b7d2d7af02', class: {
+        return (h("div", { key: '59dfd679550b20ce3934cff294d548fc975c1c25', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '5b8730f3424abb59a4f112a8cf4f820d3ea18f8b', class: "background" }, this.theme === "turva" && h("div", { key: '38b4170db541d4a236704fb6b27740c33919ef83', class: "background-mask" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '4b4724634d1e265f5647dcd33721a98867e8bd60', class: "brand-shape" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '26f7bc99f46804ee1102ce912f6ca77d339be248', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '4f2aa62fb0c1db1e07c64e15a089091ec2eab04c', class: {
+            } }, h("div", { key: '258eb3656ba0059840c72bd7806a0439ca52a415', class: "background" }, this.theme === "turva" && h("div", { key: '99ded3829d56deddf33a2fc806d9dd0d72600574', class: "background-mask" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '3ba1c95200692d41c5504b61201e8509e3b6a054', class: "brand-shape" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: '8887d09accb487a364fd18dfeb1184ecb92cc6c3', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '3177e2e35c05cb053c96928e3b0d47378e6da68e', class: {
                 "brand-shaped-icon": true,
                 "secondary-background": this.iconBackground === "secondary" && this.theme !== "turva",
-            } }, h("duet-icon", { key: '0b654e7123f11229e0c685e0b81a46697a02b292', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'b6d28fa2f26538252371352175a8a9bba5cc8957', class: { heading: true, "has-back-button": this.hasButtonSlot } }, h("slot", { key: '283f4783659934a188371693ff2f418b256f43c3', name: "heading" }), this.hasButtonSlot && (h("div", { key: 'bf572a5c8cb71cfb3fba0090e4ca0279b0f9e8f2', class: "button-container" }, h("slot", { key: 'a78e5b2921240203bcd7572825e46b8a49c236cf', name: "button" }))), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'e0d6bae844200dbd0cc4264186c178e9cbcc4c3a' }, h("duet-spacer", { key: '5e02b1d6f9d9ae5133ec857b69da04d73159a213', size: "large" }), h("div", { key: '8b14ec6f1cda71d6a69236e9256faa91519da39e', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("duet-icon", { key: '61898fc2452a5c18f7c259de4dc07d75cf7f8c75', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'ecdede2a7eecfdc568ae7ccbb0614f88c189b143', class: { heading: true, "has-back-button": this.hasButtonSlot } }, h("slot", { key: '319cf123e63319a630230536b32f6157d0ee2aff', name: "heading" }), this.hasButtonSlot && (h("div", { key: 'c6a4b5e6128c6da9a023d6ad2e3c06b206fc83c4', class: "button-container" }, h("slot", { key: 'c78cd05232a91bf956da92477d246d4b31aadabd', name: "button" }))), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'd92c68af2e209cc28656d8e9817e756faa39fa29' }, h("duet-spacer", { key: 'd05f4b7cb5ca7b61417bcc8423e5cf0690a5b40b', size: "large" }), h("div", { key: 'c59a33d2a43f6960c6fd3bd6d8e99b078e8b1281', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -393,32 +393,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '713861c49972efc0620c9d6425aebc4621c60725', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '26f0be5edcc3d2e83961c40a097e804360ec82e4', 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: 'd4335699dfa6e3335dfcafed3de2cc0b2d0e0267', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '08b38d39cdd61be664e02d24ab6c518ce4e652ce', 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: 'e048dc669a90234e04206d2e919477c456437171', "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: '4cc0ec61a9b412f51a71b90b1ff1f371d20b6b77', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'a21618609f5e18d5febe55d009164ae2b6104cee', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: 'd0dace3644fb466ba455012c04624c2a24b0ff9f', "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: '99fced562563224ca9667ddc0c2a3d0cc46604f6', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '392854e8ea2b19e6f7c28434d930db4f733b6485', 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: 'f398d058c0ebf2bdab7ab945bed0b4548bbbfe83', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'de374f4e19bc9a7dea35fda71123e18c040d3cd6', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '045fb3a76f525bf38592dbd063d786d85ef0aef4', 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: 'a34ff449e6b0f6bfdf045751e137d7bbf82745b0', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '7d0bf05653e187650b301293c8b48ecf7c19775a', 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: '90d13a9f2c13fcca364cc126b01ad46ce8b6f1e9', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '499f743f212068efe40d91da50a6a5d3a36b1bb8', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '0e1f27295e8d57233da5e99e921deb0acc40bdf5', 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: '855d343b101d8a4cb531e5534121c32fcebb6537' }, h("li", { key: '87e9bf3c0e7709986f8425c68dcf453e37ecea53', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ff073c3fb7001b83e9bd8254b5f0058350681aab', 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: '2534ef73dffd5a2894f64e37b9b93ef921eeae9b', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '41366d11be98973382389f639c4361fa88b3ee03', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '85acf7a3650a337686849a07b94e3c5ebe3985fc', 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: '0cb3f15c9fbf047ebd3f42a9ea312e2b7eb7cda5', 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: 'c330810aeb916a70838b5902a945179516c08c2a' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'e7827136e1d02443b965071e73e678f3db1d5045', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'ddf79df091880166ff5717d7ad56068afba21e8b', 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: 'eab0f9616b5a0a283d2cfdfa12de2c0a8e7b4c6a', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'b90fc9f829527d1d0cede68970d1bdbeeb00097c', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'b842abee7b341e75edbb9242f32febb0fd9027d0', 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: '3fa13a5d834e8c4a9a8a3abe93ef7466955fb3c3' }, h("li", { key: '48750614360629d752ef5338feee64d26ee14070', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '851ea5271176c28b4182c932df5420296360a660', 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: '3577f7013764aaa16cfe26677f0b517d637a55dc', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'affed7955f766520ba5ab4cbbb2927c31f2e3a7b', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'a5c04fd07e5c086c458a50943ea23f8cdd65f136', 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: '5af97877da74ed4b46d77eda227d2c20ab045be3', 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: '8480cff4e6aa59cebc295fee8ee08523d87ef5ec' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '0d0af2a75256c727c8fc1e362b5c8628e164d51e', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'b9009792ab06fed817fa435c1434c0a73fa1b9ec', 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: '268a3e0ba7d800dacc323398a00b970a72cf1cd7', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'edaa7c3c5522faf40e84cff469b09a05138ffccb', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ced4311041090c7cc3351403e24247e0c5c154b5', 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: '7a39f4ad0995c18ebd0ffbd95b507272b17b5fe9', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'ad540cc00840f8452ef0bb93ee6aaa7bdc7b9a9a', class: {
+                : undefined }, h("div", { key: '9c6a910c389d177383641955b31555b814df5694', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'df2ef26b5062b14d09f74e6bf165673834d89d98', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e4fc05e7c0163974b0929387122200f56b352d7f', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'ef49bbd3a02a2938e5d96cf667078e999051c49e', 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: '0f09b068770c1bf14c76d0d2c36e2138fdb3e5af', 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: 'bcc8fc11ffaf043e45579c55efc07afc16fe9347', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e53ee2acdfdf60f158d51607df8ee61f9af16b25', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'fb6f817b26e12d521918dafb1bf356d8ea75d9b5', 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-panel/duet-panel.js

@@ -30,14 +30,14 @@ export class DuetPanel {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: 'c2b446e4eff02ce722d5fc470d9aedcb453e2dd2', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: '1039cfb9fa6e615149ca632ffd85da61d9b00f91', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+        return (h(Host, { key: 'f37216ed42183b04d0adc65eaa6e83562dd6cde5', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: '6be8f932e02e034eb5dedcd260162d19c53377d6', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
                 "duet-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation.split("-")[0]]: true,
                 [this.variation.split("-")[1]]: true,
                 [`padding-${this.padding}`]: true,
                 border: this.border,
-            } }, h("slot", { key: 'c923ad024bfad0670229a5da4ba140f5747549e4' }))));
+            } }, h("slot", { key: 'ce0682b4b1c4a663c5f58f12c5e92d5bca0da715' }))));
     }
     static get is() { return "duet-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,7 +52,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: 'e1478a81d9627fcff4c00c71d03fc9fe91642bbc', "aria-describedby": this.id }, h("p", { key: '78658b077c0692618bb7d6855bbd6605abd7b13f', id: this.id, class: {
+        return (h(Host, { key: '1fcdbc323b600e21f69c2b1f91343aacdc8c6552', "aria-describedby": this.id }, h("p", { key: '0d8f3bd22932b3520707fb4f1013816bc88bd779', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -61,7 +61,7 @@ export class DuetParagraph {
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-inherit-color": !this.color && this.inheritingParents.some(p => this.element.closest(p)),
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '83e026a3225a92a554c68da2eff4c7eb5eab36d5' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '3ab49870546786d333d5e1d2c4d2271d129d990e' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,6 +117,7 @@ export class DuetPhoneInput {
         this.handleBlur = () => {
             //console.log(ev)
         };
+        this.setPopupMenuWidth = () => (this.countryCodePopup.shadowRoot.querySelector("div").style.width = `${this.element.clientWidth}px`);
         this.handleInput = () => {
             var _a, _b, _c;
             const currentValue = (_b = (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim();
@@ -143,6 +144,7 @@ export class DuetPhoneInput {
         this.handleCountryCodeSelectorOpen = () => {
             this.countryCodePopup.controller = this.countryCodeButton;
             this.countryCodePopup.show();
+            this.setPopupMenuWidth();
         };
         this.handleCountryCodeSelectorSelect = (ev) => {
             const item = ev.target.closest("duet-popup-menu-item");
@@ -310,11 +312,17 @@ export class DuetPhoneInput {
             .map(c => c.trim().toUpperCase())
             .pop();
         const identifier = this.identifier || this.inputId;
+        // Inline styles as we can't set styles for duet-popup-menu-item slotted content from duet-phone-input scss
+        const countryNameStyle = {
+            "white-space": "pre",
+            overflow: "hidden",
+            "text-overflow": "ellipsis",
+        };
         return (h(Host, { class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-divider", null))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, minlength: this.minlength, maxlength: this.maxlength, autoComplete: this.autoComplete, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.getAccessibleLabelForButton(), onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
+            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", { style: countryNameStyle }, country[this.language]), h("span", null, "\u00A0(+", country.telephoneCountryCode, ")"))), country.isoCode === lastListFirstCode && h("duet-divider", null))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, minlength: this.minlength, maxlength: this.maxlength, autoComplete: this.autoComplete, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.getAccessibleLabelForButton(), onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
     }
     static get is() { return "duet-phone-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { spaceXSmall } from "@duetds/tokens";
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { setOpenerExpanded } from "../../utils/a11y-utils";
@@ -117,10 +117,19 @@ export class DuetPopupMenu {
             if (!this.openButton) {
                 return;
             }
+            if (this.menuElement) {
+                this.menuElement.style.maxHeight = "";
+            }
             const middleware = [
                 offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
                 this.allowVerticalFlip && flip(),
                 shift({ padding: 5 }),
+                size({
+                    padding: 5,
+                    apply: ({ availableHeight, elements }) => {
+                        elements.floating.style.maxHeight = `${availableHeight}px`;
+                    },
+                }),
             ].filter(Boolean);
             const coordinates = await computePosition(this.openButton, this.menuElement, {
                 middleware,
@@ -418,17 +427,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: 'faa607d185d31d39be849eaf1bc2e04a18dc6844', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '30e8fda181937ec87b45753e11407752b9cb8bdb', ref: element => {
+        return (h(Host, { key: '719d2a7e1c11ff9163309781fec512cc4e37fa4a', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: 'a8dfefb0508a16c814d88e2fecc32409011f90db', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '63a51a1dade7d51632c7cc03dcc5889943c06384' }, h("duet-input", { key: '0afe720395fbe6388ce6fb8fa106540671768f10', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '8dafb4aa2cec51336c1ac0ce62fc7d55aa8950e6' }, h("span", { key: '172e686cfd6f5cbaab6e64a49ab86ad9ef6f860d', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'd8332f24330773e5d0be9adcde515d949c95c08d' }, h("duet-input", { key: 'e2754d948c53aa5b1af9752bd8705b32b3a93bcb', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'f8fe6c8dacb340d88c4896ce56c2ccecd38f655e' }, h("span", { key: 'ccca6cce4b4c5852c2bbb50954c002505a6d2872', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: '01b48e3d5918af7980363bb2256e65e9e109bfa3', size: "xx-small" }))), h("slot", { key: 'd2dec433d6eb6720850805950182ff9edeaa4dc3' }))));
+                `)), h("duet-spacer", { key: '843f6111e7484d49e20e528e95e090678812d819', size: "xx-small" }))), h("slot", { key: 'f5c3eb16c8bc812f982ec6c2e0b95f5cbbe643cc' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,6 +34,7 @@
   flex-grow: 1;
   gap: 12px;
   align-items: center;
+  min-width: 0;
   height: 100%;
   padding: 8px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -65,6 +66,7 @@
 }
 .duet-popup-menu-item .duet-popup-menu-item-label {
   flex-grow: 1;
+  min-width: 0;
 }
 .duet-popup-menu-item .duet-popup-menu-item-trailing {
   padding-left: 20px;

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: 'dc904d95dbb1b0274fcdadcea67ce47aba4d7fe5', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'ee50bbb09eba600e81b860df3102e0a2cd6288f2', 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, "aria-current": this.active ? "true" : undefined }, this.leadingIcon && (h("duet-icon", { key: '2393da90d783cc2cde59d87a05035d3539009c94', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '3b89e70152736a394a1d783146d7fcf7042af27c', class: "duet-popup-menu-item-label" }, h("slot", { key: '7e2c5bff4d032a76c871b346477c1380d41ac23e' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '1307e84b95a9f3f731701377a93275e00b17682e', name: this.url && this.external
+        return (h(Host, { key: '5a9f85c614eb0525860c91e07dac83db868b26ff', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'a7362c89ea53df72a450570693052218434c1cb3', 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, "aria-current": this.active ? "true" : undefined }, this.leadingIcon && (h("duet-icon", { key: '4c19fb2ac64438dc692a6c81cf8d51b48114cca7', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'e5ae676e11f424cae135d54b5bab02d2de476eb8', class: "duet-popup-menu-item-label" }, h("slot", { key: '42cc85d521d8515ce3d5e413c117a98d41f008ff' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '2a675b18dc0e1162df79ae87fab5ebeda3477959', 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: 'ccdd5e50e27621e4c9bddc18ddfb4fa32c5df087', 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: '2d23cea5ab743b54774fbda5a252153d11e1ddf5', 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.js

@@ -80,18 +80,18 @@ export class DuetPromoCard {
             img: {
                 src: this.image,
                 alt: this.imageAlt || "",
-                loading: "lazy",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
                 class: "image",
-                role: this.imageAlt ? undefined : "presentation",
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: '17e585c7caea2ce49b25ea82914c047ff6c82a9a', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'd71249878100984ee82f889d89c9457c730f7662', class: {
+        return (h(Host, { key: 'a11868d1112419d418d0e9ed0fb62d5cfad351e4', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '15a7d5bbf45eb253980ec7d5a9d1a0ab22567eb5', 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: 'c4edfe1d3f7a37846ce57b02390f6c506c2c141b', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h(DuetPicture, Object.assign({ key: '4db132f911aa01f941743b55bb6efb8275219bb8' }, pictureSource)), h("div", { key: 'cac0e424e892d37419eac7e2af2b0bd7308b0c39', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '36a74542f6621186fead0089783ac32a418b3125', class: "pre-heading" }, h("slot", { key: 'd8ecaaa3fe7d32b1d751acd669b6869a2168231f', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'ae586b7d14276add01c99296d8fc96844eed3ee2', class: "heading" }, h("duet-heading", { key: '7079249d8751808397889bc332aac7e4bf0beb00', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e4211262efe0fc117017355c175487a24dc52485' }, h("slot", { key: 'b0f6196e3cec65f855231d232684e7507f71a972', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'c3275a5080abb7488022cdb97da68110872fc80e', class: "description" }, h("duet-paragraph", { key: '0232414d087686f41f37fe95cbecda5217250ac0', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '04d9e5329afdbaaec69f7848017ae5489aa671c1' }, h("slot", { key: 'da7bfca8139e63ee663bb426ca6ebdad8fed35cd', name: "description" }))))), this.hasActionSlot && (h("div", { key: '054ddda2d414a26348e684738ebad3042ea292b3', class: "action" }, h("slot", { key: '348682adce3b3f16de045034dccf4daf48edc6ca', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '74cafd91fd84b708b39d04ab2ff76e80f040c6cd', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h(DuetPicture, Object.assign({ key: '455e032e836d10caf961d1b7e9e9f5927ee2110c' }, pictureSource)), h("div", { key: '8b8d9f4df668c52eed6d356a5713474760d38f0c', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '30c8391d3082c4f13fd5fe15688078834b1d33b6', class: "pre-heading" }, h("slot", { key: 'e1f9aff9e5943734f31af4a79d826eec45fed120', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'b540f06b51e05fefadd176294331c5333977fa45', class: "heading" }, h("duet-heading", { key: 'fce865ee3ea25de126bc75c4f2b96daacf2470d3', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '46225638ad07ce667b2cb7d8a341e404fa091b1f' }, h("slot", { key: 'd8d502652a8163b0437669aa07f2b933eb3f630d', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '4d3ce20fc62961f6b9ebd4a1846bf55db3d33b2e', class: "description" }, h("duet-paragraph", { key: '058e06c452f4cdaeb9954f44dfa2dc48c15841a1', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'f74e2644fdfbba489502f98ff4e4a9e2b20d06eb' }, h("slot", { key: '1a570c3b1db0b4964069fc8b9f3a5bd56a8de326', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2ab71f64f6bbccf208b4281a096df0488c34d580', class: "action" }, h("slot", { key: '120257629db8b69ee16078f519e55a163c16687d', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -250,6 +250,25 @@ export class DuetPromoCard {
                 "setter": false,
                 "reflect": false
             },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "sources": {
                 "type": "string",
                 "attribute": "sources",