@duetds/components 10.4.0 → 10.5.0

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

@@ -37,11 +37,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: 'e0a035450d6e7305b25de43ed55f4ffe7a15a0e3' }, h("div", { key: '6c5d998d494deab47f1384005e7d2dfb95246c7b', class: {
+        return (h(Host, { key: 'b082df5828c66c540240a355c2143bdc97cdeda2' }, h("div", { key: '318c40bc242a649eb1e74191703e77ef9f567dac', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '48c6d6f720cd951a3e80e953265a1c79174c0dd6', class: "container" }, h("duet-icon", { key: 'f25c2dbb92d9a7f05b11512f9ef73052585916a7', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'e01e4dcdc7992709803169f5fb85183134f7608f' }, h("slot", { key: '7d23fc2421ababa106e834cbb1681d7b94137574' })), this.hasAuthorSlot && (h("figcaption", { key: 'ccd723ba6d25df159a5826a0ab652cde0556659d', class: "author" }, h("span", { key: '0daa1d1540484278f462a1f6ea258dd292f5548c' }, "\u2014 "), h("slot", { key: '47f2ade5a9f6e081482c243fa52942de8fa523e8', name: "author" })))))));
+            } }, h("figure", { key: '4c7ff23d3c646e8e37452488aba5b9a28344625f', class: "container" }, h("duet-icon", { key: 'd5234359ce6513b20a552366603498b7dc5729f5', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '67ab9a0d89f6abff523b8ca16a20c2a67865b86a' }, h("slot", { key: 'fc4670a439f114411b42ce3dcd8ef7f365fa650c' })), this.hasAuthorSlot && (h("figcaption", { key: '9d1b92d3229bef3447e7b5590efc766d4efb2ad6', class: "author" }, h("span", { key: '5310ad556c87706338d0a75058107d2e4d1fe241' }, "\u2014 "), h("slot", { key: 'f7281f1633a536bd242831e952ca1bc240b98b1c', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -203,16 +203,14 @@ export class DuetChip {
             }
         };
         /**
-         * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
+         * Stop prevent default if popup is present, as the popup controls value and checked state.
          */
         this.onFilterClick = (evt) => {
             if (this.disabled) {
-                evt.stopPropagation();
                 evt.preventDefault();
                 return;
             }
             if (this.popupElement) {
-                evt.stopPropagation();
                 evt.preventDefault();
                 this.popupElement.toggle();
             }
@@ -221,7 +219,6 @@ export class DuetChip {
          * Remove input chip
          */
         this.onRemoveClick = (evt) => {
-            evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
             evt === null || evt === void 0 ? void 0 : evt.preventDefault();
             this.duetRemove.emit({
                 originalEvent: evt,
@@ -334,7 +331,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: 'a02dfd14dbc6adb2b4603f1032071f973ed2ccde', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'f6f837561846f06857082a732a01dc00be276bab', class: classes }, h("button", Object.assign({ key: '614901de9dce1a3613e710f2144dd9cd8f3e635a', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: 'f0bbf7f4631fb86dc23a381c25c03cabe947cc3e', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '6a7c79b76c0fd5d06b4b4d3f6640459cd6d6298d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '397dbf6b64587f75b1fc3f3d3f0bf12a0e4df881' })))), this.variation === "input" && (h("span", { key: '5ee6a9d0856e2879420676696e360c78205041cc', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '4bbbbdece24e710ce9933ff9f91a9c800b3e58fe', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: 'd1aef801dcf90532b29fc97c01b7456d8487f44a', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'a63f98e142a1a3b23fc95d5fc1da841d377e10ce', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '11f084e182d0c9d6aa3662bcce61235e8ec76fcf' })), h("button", { key: '777701d86d7a3c4dc31e94d11e3e127ed7d2e1fd', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '856fed5273e55797d4824c153cf2cb3278e9a2b4', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '679cda39bb299541877fe34081bc414119d49455', class: classes }, h("input", Object.assign({ key: '7ccb0cad55edef64e3d261416384871b5474908e', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'c0bc9afaac898ec41d39ae2fd4908389b3ac065a', htmlFor: identifier }, this.icon && (h("span", { key: '15038fc3a98b2486a950d1b64d2b54ee6e479393', class: "duet-chip-icon-container" }, h("duet-icon", { key: '592062e0add70bea207fef298935a3c2d0a6fdb4', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'e55ffd29e3d14b71be6c15f59bc36395d5868269', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '5aab1d1c1dfae62c0801d8b726cd78ce24fb8c2d' }), this.popupElement && (h("span", { key: '8ce9e5d7685346af76deb8d9561e149033b723c5', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'a6a23f49aa4b6a182edd3b135b695a42089b8c5a', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '6d61938382d8ff58e4a817cce31928d191cf5abb', class: classes }, h("slot", { key: '72b0c769e2bee8de5fc6f834232aae55555e7835', name: "input" }), h("label", { key: '3ad924385c4d43e905cc42efaa016fd90e3854b5', htmlFor: identifier }, this.icon && (h("span", { key: 'e5d698e18b0bf9e37db7b13fc4a96124736be144', class: "duet-chip-icon-container" }, h("duet-icon", { key: '3101dbabb443a5b23cc7c94ad5bbdb0fbbcc930b', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '0084200969cb3a17c048869ba10fdefd28dbc7ed', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'e43b1bdf08e27bf2dcc164a45bf088451b742e88' }))))));
+        return (h(Host, { key: 'ebc8f8cba112ee9f682c22ba09f04b05968d4ba2', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '6bf0c0545a457d2917df074d7d263e12e07e3255', class: classes }, h("button", Object.assign({ key: '51780aa4be42824dd17784e59b17ff23cdca4ea1', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '52036fee728f26c3b21701d9ed870caf45e9295f', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '7ef322e3c74ca552fb91a03d1d4d7cbba4b325e3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'b781a521f1dc02c0c7b0792309d4fb730acc5c2d' })))), this.variation === "input" && (h("span", { key: 'c997bfd1f27de93629210b953c9788bdf754538f', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: 'c1ff3d503dda53884a42637460d048a27fe0d40e', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '73d0e2250e46b6bdd1ffd65f9879e7c9d90da448', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'f5353d825977fb008fb2d71fe796a2c6f4720181', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '2932e26e6266957b80953b2ce275d580466e47ba' })), h("button", { key: '248c016d99211ec7893a1cc74f7ecd268d44d343', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '6172cedf507d0e6f69ea39ce8fa6a4e21b714d11', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '8c7b88c4c077b7bd4afd0c7bdf36d01f9c9092ae', class: classes }, h("input", Object.assign({ key: 'b97c5cba016483f506521d00100f022160f48680', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'cc082e72c8f2a782f4bfd44afc35daea973c6b08', htmlFor: identifier }, this.icon && (h("span", { key: 'a453948d4d0507fe5dbd080f573d83356f95f35c', class: "duet-chip-icon-container" }, h("duet-icon", { key: '4545c9c75f4ac311e19d9932328eb7e6d8318ac9', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '2dd3e4bc69e6efd4138ba8b74a5fddf52394416f', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '5367a32b3b34e7c67412bd0a0dfa9ace24636687' }), this.popupElement && (h("span", { key: 'edad2d024ba464eea661cd1990629633438b6ba0', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'aa76a07f9446fea95dc61660c92c5bee645f27d4', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '97fe2aee42e9823b794acaeda3df724470c4c832', class: classes }, h("slot", { key: 'f820fe5d09ff67433693698dd9d60848535cab8a', name: "input" }), h("label", { key: '0953b3248cc1c8f6fa46f2684f7fc465bfd0a412', htmlFor: identifier }, this.icon && (h("span", { key: '25e66d3992af529de900ead65488bf64a4c12650', class: "duet-chip-icon-container" }, h("duet-icon", { key: '731d3562a51b7c231d8142c7b0ec8d95675439ab', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '9b041e11ab55414369bcd45962c31263129fd5b6', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '9a9dd5c4ba7e327a2df00f24bb272f61a4061d65' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -33,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '9f320db3e8549d7d12de134f013789c1f412b947', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'a8fe605a230fd34d9714bd5194c281b87394bd24', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '91fabdc145a023efc8317ef543296d4e5e2509d9', class: {
+        return (h(Host, { key: '77d8d9cfa205def19022cd899ab98eb36007d2e2', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'b93b32d626ceca01d12390209e700eef8665fd8b', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'fa4d7323cf416248275604e05b261bc1f542ea6e', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '9a418c3b3cd7c451f52003eb5efe16e90a4d5841', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: 'd2a988ecdd6f5d41ce318365966515ff92c252c6', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -263,13 +263,13 @@ export class DuetChoice {
          * Local methods
          */
         this.toggleChecked = ev => {
+            // As label click by default toggles the input, but we handle
+            // toggling here, prevent default.
             ev.preventDefault();
-            ev.stopPropagation();
             if (this.getDisabled()) {
                 return;
             }
-            // if it's a radio button, and it's already checked
-            // we shouldn't fire an event, so exit early
+            // For a checked radio button do not toggle checkedness nor emit event.
             if (this.type === "radio" && this.checked) {
                 return;
             }
@@ -424,7 +424,7 @@ export class DuetChoice {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c4b3a5c501d38245acc5af3e2b9f544bd0bf7072', class: {
+        return (h(Host, { key: '161ca837a384fd96fde8171eb0ee9a922f348740', class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 [`horizontal-responsive-${this.groupResponsive}`]: this.groupDirection === "horizontal" && !!this.groupResponsive,
                 "vertical-stretch": this.groupDirection === "horizontal",
@@ -433,10 +433,10 @@ export class DuetChoice {
                 "duet-theme-turva": this.theme === "turva",
                 "no-hover": this.isHovering,
                 disabled: this.getDisabled(),
-            } }, h("div", { key: '795598769dac455ce019fafc78a0da012fab367e', class: {
+            } }, h("div", { key: '9b1f7f73d1e644294e06780f748a5b5c86f3c419', class: {
                 "duet-choice-card-flextainer": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '7c2d292a71e2c29410fe1b25b23f21d2331a2441', class: {
+            } }, h("div", { key: '5bd120316eff11e496393cc3d41401c7523d1fdc', class: {
                 "duet-choice-card": true,
                 "has-icon": !!this.icon,
                 "has-info": this.hasInfo,
@@ -445,16 +445,16 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, h("slot", { key: '7c8737f5f56691e6d91b1ef6aa88d4d429a91853', name: "choiceinput" }), h("label", { key: '956d1a8a3e617e20822cb45e16510552377c689a', class: {
+            } }, h("slot", { key: '25b753b3d13766c86e7c03e48ecde9ee345151c9', name: "choiceinput" }), h("label", { key: 'd113e5e6012cd5606552b6964c0f792b992483af', class: {
                 "duet-choice-label": true,
                 "has-before-text": this.hasBeforeText,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.getDisabled(),
-            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '8e06e00faf592c2217bcdf4125de0a3fbe688226', name: "before-text" }), this.icon && (h("div", { key: 'a03eb510213a5dacea0ea1a8fba5c59e3f7b5adf', class: "duet-choice-card-icon" }, h("duet-icon", { key: '6f1da454489ebc91e044c73bcaa72e4dc0cbc434', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '7ae5d20c3621b1ea86a08e01752a1501f4c6141f', class: "duet-choice-card-text" }, h("div", { key: '48924d49aa8990d06b898d5e859d3259340424f3' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '159e947250b2e752ede4b9e1cc239a17beb56e4a' }, h("duet-spacer", { key: '841d4ceb579eafb87c381f78c4a62d6943480702', size: "xx-small" }), h("duet-caption", { key: 'da80efff2d5db1ac58bcba1074d2acd8ebe49fc4', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '990e772b8ed9d22a20f5a6718d5884d49135b6b1' }, h("duet-spacer", { key: '691495c8aeb63a55951a36c28f15bcb049c9d36e', size: "xx-small" }), h("slot", { key: 'ba5ca5f8c750aa685ae9560f482401e315e1700b', name: "additional" })))), h("div", { key: 'a5a27faf19b806f0cbe5d78c751acbc05cd70a4e' }, h("div", { key: '5191f1bc54972485f2850139cf7dedb0c66e0f69', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'abe835c0eb8f2917a1e1e87b883d9a43c8883ae6', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '232418bd6f978e77039ebea2bdea0388efeae571', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '1ab6a902a2a1e6ea5ab7e075a2318482cf0a1f75', name: "before-text" }), this.icon && (h("div", { key: '524b6f9260ab2e3bab12f933ad14e744b1401a12', class: "duet-choice-card-icon" }, h("duet-icon", { key: 'b969cf6e06ffaf643aa701c37d4541e36f4e16a8', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '9cc50495673c27a7c6a5f3bdb14c609e6a4601f8', class: "duet-choice-card-text" }, h("div", { key: 'c87f5c7fbfcb824cd962b47f5b245b0d113cb04b' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '8b325a22769d880383b1b3b24e531306b83bc082' }, h("duet-spacer", { key: '7d0b9e0b85d3ed5d5da0bcad6991d17ceb385587', size: "xx-small" }), h("duet-caption", { key: '3a3a799147caa313ca58a101dc47e5149c0c214f', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: 'ebea33b278a48a2d1277df23682aff24ffca5f93' }, h("duet-spacer", { key: 'c06cf1daace2056cfc11c90e2fdbe2e3d5a02281', size: "xx-small" }), h("slot", { key: '952ec73f80beb3dc70550cc7f294f3cc19466109', name: "additional" })))), h("div", { key: 'c011bec512f287c09ac07c7eb27351bdf035d95f' }, h("div", { key: 'df64779e16fd3eb7a476794b11516433f7d9cdce', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: '94314b297dc613c45adaa647eeec06f93b01e325', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: 'dd3fc995ac9ac436708557efc5319b7c081d76e8', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
                 "duet-choice-info-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'cd5726ddd6b87acb1c4a8b0661906c4555c8371a', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'd2d3d9bc3e7862c2f01ba3b2ad27dd7662c0a8a4', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'eab4a0209ba1f4fe2bb7a4be8971f843a67b77e6', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'a78097639b91f3c310e490e8cfc23040a7dfcb48', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'a4a43850eb0cbbb171ff87b7834e135247d5f4c8', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'd081dffa05b32cd86475b5dcaed06d8d12af4b85', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
                 "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
                 "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
             } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "-1", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -75,7 +75,7 @@ export class DuetChoiceGroup {
             if (mutationList.some(r => {
                 var _a;
                 return ((_a = r.removedNodes) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-                    Array.from(r.removedNodes.values()).some(n => n.nodeName.toLowerCase() === "duet-choice");
+                    Array.from(r.removedNodes.values()).some(n => n.nodeName.toLowerCase() === "duet-choice" && this.choices.has(n));
             })) {
                 this.updateChoices();
             }
@@ -145,13 +145,11 @@ export class DuetChoiceGroup {
     async updateChoices() {
         var _a;
         const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
+        const allChoices = Array.from(this.element.querySelectorAll("duet-choice"));
+        const ownChoices = allChoices.filter(choice => !allChoices.includes(choice.parentElement.closest("duet-choice")));
         let hasChecked = false;
         this.choices.clear();
-        this.element.querySelectorAll("duet-choice").forEach((choice) => {
-            if (choice.closest("duet-choice-group") === this.element) {
-                this.choices.add(choice);
-            }
-        });
+        ownChoices.forEach(choice => this.choices.add(choice));
         // Walk the DOM in reverse order, since the last selected one wins
         for (const choice of Array.from(this.choices)) {
             choice.name = this.name;
@@ -183,14 +181,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '39267534dcf19f7f942ef44d869d302552ad8463', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (h(Host, { key: '94d0ad93557a1487328291dec3786b2a54809a33', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: '1e292babf2206d42d58c46f88bed02959e595dc1', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '435735b34c7f437aba23bda2eebd7fa78aa30f3d', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '390312b35af123116ec5919b31f61d9499559813', name: "tooltip", slot: "tooltip" }), h("div", { key: 'fb68426f6c7feac6c767511bcaccfb6585515e3e', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '5b26fd1d7d1239fdcdcb6d736445a6366995c3bc' })))));
+            } }, h("duet-fieldset", { key: '21ef6afa85bf7d3dddc001aae2583adbd3dee304', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '5ff31a8282e6e7eace9d2bb035d325af2d073fea', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '8e9b7d9abb95cd49f4bbc5fa9a694c2691a32c7d', name: "tooltip", slot: "tooltip" }), h("div", { key: 'be989adb0d4a5794d0132a3ee00979cf1bf79bd9', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '725c965b94dd5e8555d9e2e450ac6d61e74cefb6' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -545,7 +545,6 @@ export class DuetCombobox {
     // Event handlers
     onListClick(e, item) {
         e.preventDefault();
-        e.stopPropagation();
         // update selected item with id
         if (this.multiple) {
             this.addSelectedItem(item.id, true);

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

@@ -47,10 +47,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: 'a29a3dab2ac7fb3079f2c1a159af7f4e7b5c226b', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '14753b1f4fc3901aa2285d438c612e66619fabb5', class: {
+        return (h(Host, { key: '6cf20cb225b22fbb826b136c3909234684d30e3d', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '24e57cbe34b4d01ff024fe8128d3168b61e61af6', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'dc77c6904966d2b6438391dd2c827832ffe86325' }, this.name && (h("duet-heading", { key: 'a10e331782d05726446653615ba8effbb1de3257', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3f49dc9a8933eb5551f259e2dcca7f434f8e5082', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '99ad9df72533f48e298153aeadf18cb50e37d1e9', class: "email" }, h("duet-icon", { key: 'cbe804f4877e52df6f678ace315efe098b3ef914', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e909d9bc1096700ef5fb6d7a1e87c499d585d4dd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fe217c26608f2f461999844a3a00fe335c1e4509', class: "phone" }, h("duet-icon", { key: '1194445745ecb176f6fcc39a18c3e233921524d9', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b83e145b7909c3ef697932ff1cf95d223d4a4b14', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'fdb27957cd0b60be23e8b4df7f062da5cc3eafc1', class: "call-to-action" }, h("duet-button", { key: 'f7cd81b4f2712057ee507a9f0f01e59121e7960e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'b3a716a438e7793ef194ae0b1067d926b75e0925' }), h("slot", { key: '3d4bea81e03b40457deb9fd0731c14a9b80d465e' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'f3c40c440d2d9dd97e3c1e24817d60e62f6347f0' }, this.name && (h("duet-heading", { key: 'cde7a70f10cfdd45e801c9ef923e116b2ee12e42', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '1c855114d2101701a8b39f75fe8b2ae76d5ffe57', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'b552b0f0de5e16059e77ee518e2087d24a2171c4', class: "email" }, h("duet-icon", { key: '2048a5cb8e29d7d664c984c72031cdfd1894e0a6', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '6e2a9b632e0fb1df3efd51dc66d6df1891eaa3a1', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '1a263f67d1844f9c2ba334ba24ebc32d9faf4b86', class: "phone" }, h("duet-icon", { key: 'dab3c18ed7f4c092aa8644ef6d9a915854c9e33d', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '68c6b2ff4480300f563b7d8d65fb4d47160fcd8b', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '70288a25480b39a333831a129def567c99f202b7', class: "call-to-action" }, h("duet-button", { key: 'c5fccd74b8b2b6b4917b464c5e723c657e326bb0', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '9fd8e574534d15aa89eaac786c257586a6f9f845' }), h("slot", { key: 'ab0fa1cc3232c70441d441e4c673b8b562ffbe92' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -475,13 +475,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '5ebd34bf6ba1033b890138e5523f45fecd17eaf4', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '8c4b995485be3c6b070ce738f3416db0d9683771', class: "duet-date" }, h(DatePickerInput, { key: 'c0b308099cd5c56790a1160d10a682551ce9da7e', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: 'cca008327d5a939054a1b2abd748b08170b19a07', class: {
+        return (h(Host, { key: 'bc53156f31fd151a978be4cb494d89811177d2de', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: 'bd85feeae1d997447181347f131cf0eaa309af93', class: "duet-date" }, h(DatePickerInput, { key: '0e22a10646a9df5c2dee41047df08e8df6b63872', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: 'c4575f4c809d00307b254756d1c00e5d65520b03', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
                 error: !!this.error,
                 active: this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: 'fcb2d3f3fd5333529c2ebc82590a6a543112a5f4', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '0de38fdb796337ec9448bcff1bb652776fdf6f60', moveFocusTo: this.focusedDayNode }), h("div", { key: '9950afbc58987e498e2e6734fd6af177c65d94a8', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '2394f33f1efd2e0626b2a1bc3642a73193798b13', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '74b68ad35d92ab0c2616be5466ea6b8b2c1a1451', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '7385d9ef814cf4557cf903f705b38a7571369d0f', margin: "none" }, this.label), h("button", { key: '5ba61af3c6b024f1f3ef531b412e5c20243d83ca', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '14e320af49eb06c184cfe918a67f278bdac888bf', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'b58668ebd6f0849ae6e8f0454800b4ceb916443e' }, text.closeLabel))), h("div", { key: '79a07d6373ca479f45808ff3eef1ea6239148b26', class: "duet-date-dialog-header" }, h("div", { key: '6f08a300db74dd1562c658334c8220fc1569228c', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '400b1451a2180e0a189a5c1e7c27139647ec5539' }, h("h2", { key: '47225d656584304da5b114f0430e17cb74a38e53', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'b66a24df41db7807ed3c0d3f36d380a897360fa6' }, h("label", { key: 'aae8cf780c5452e1399421e177309ad7a9179803', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'f2bad2498489114a7bc0ffd6fc8c4f842b507e43', class: "duet-date-dialog-select" }, h("select", { key: '9d58e711523ace0781cc27947fb9ecc52bda8499', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '914f0bef1d172d4d5391991fd9f8206f7d0576df', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '7aebf3e0cbc22a117a5e155e0dd4518189f9b946' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'faf140d4032093b37db295f06e23ea761fa27c65', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '66399d5d57f605fe4db9c13ee13bcf89f4d38efd' }, h("label", { key: '76256efb6db83d4165a903420b70e9a6d43a2e49', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'e871aa90559d85cad33752f52a6e538571e6984f', class: "duet-date-dialog-select" }, h("select", { key: 'af2e90cb3d28123c36c83853753be30beff06400', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'a1487d1853c56fc62c20bf2b3df60cc73d666017', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'ad43c7efa4a93e4417c2051e000fe0f786b35612' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '5c42115e3dd7c4a48e5cae87b5f03ed274087ba5', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'bc63edbea7a3b069774fc0b8766983f570479501', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'e3cb3ade86eeedbaf914d104ce9b638109708eb6', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '3d1b9df7ab5852d770d6c98285b73e002a9f4468', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: 'fb66dbdf2065a158a265490a6f7c0ace038919d5', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: 'b40a59659930ae4a47fb6d8dd45f334e5fcdf026', moveFocusTo: this.closeButtonNode }))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: '73718663a16c1f4f18625a0e9b5e12c4d84e2862', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '55795dff1697ed625725a441813c2837b9180ca4', moveFocusTo: this.focusedDayNode }), h("div", { key: '4575c14cab6890c2ed93f14cc269495f4e6112c6', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '64ec3d2f1809490ebfe3dd1e04bd332fd603010a', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: 'b5545e0104ad9a0bc9f99ff3a725752595a0ffa6', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '73d2c0aa481b994ce191816304e1867f461aa7d7', margin: "none" }, this.label), h("button", { key: 'c7483c8e743830ff8a21c2127897b43e45b57d8b', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'b2b8fd08895e8a5b0de42af39fb3e8b4810314e7', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '9238a95c2b5266055844e593ba8ab6349d9d033f' }, text.closeLabel))), h("div", { key: '3f68135c40899e3de9f9546ebdace84fbe831141', class: "duet-date-dialog-header" }, h("div", { key: '5cc6d3e6a2665e29091147f86fe44339af33327c', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '5bf35b2c9736d2d110344b92942f13be850d644b' }, h("h2", { key: '95391f17e2c907733fe1c3d567678d236e369fdc', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'a356aafd4ce51cf91cbc363297645efa79da42e3' }, h("label", { key: 'd806131d0e348f3743726e47daeb580baaec91a2', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '5e4a84de81c95b6c62dc03de1c805f472377805c', class: "duet-date-dialog-select" }, h("select", { key: 'aa66520799ef32c4dfe30506cdbeb4f01000055e', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '8bf72353d282a2c82f0e64e1a752a17dbcd6423b', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '1b9a7f95c0007b30117782c962311c54244228a3' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'a234a84604cb1f87ee8c382b7d886e00a13cd913', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: 'f41e59ff6c32248ea057f4547ef6bf24688423e1' }, h("label", { key: '10ea1d3b43b673950054ad36abe59688971843d0', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'b7cd16b90fb5126189de4648b99c6634c15bc5a2', class: "duet-date-dialog-select" }, h("select", { key: '852475517a751519016dcc2c14023b9f1850b0d9', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '426ab30bd0268b659253d8b9dcd375b7da1952dd', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '55b9cc0f5e60cd6ad666e58c2724865216d1c635' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'b28ab73ebb1ca7fac93ee3c52d696fa65f2bef29', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'eee0f191f6b409674d0ef2b7383d6ab45c316d7c', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '5a4c05b83e76b2740f71fe7e2d94602e16aa0219', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '0d4117fdd8511135bede66b13c8177d7105b567f', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: 'ac47f9d6b83fa994e5137a45c300db313dd70701', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '9727a0dab133694bd4b2ef008adec00439040b8b', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1299,6 +1299,9 @@ export class DuetDatePicker {
             }, {
                 "propName": "required",
                 "methodName": "updateValidity"
+            }, {
+                "propName": "inputValue",
+                "methodName": "updateValidity"
             }, {
                 "propName": "value",
                 "methodName": "updateInternalValue"

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

@@ -32,7 +32,7 @@ export class DuetDivider {
      */
     render() {
         const background = getColorByName(this.color);
-        return (h("div", { key: 'a833c22a31c93caea94753696848ad720b5dc06d', class: {
+        return (h("div", { key: 'cfe1692393e236239489a12b1348ee3ceacbd6e8', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,

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

@@ -206,7 +206,7 @@ export class DuetEditableTable {
      * Render Methods
      */
     render() {
-        return (h(Host, { key: 'a0c3202194fcc3910b50193f2a4fcb3bd7d3a5d8', class: {
+        return (h(Host, { key: 'e8047048590b1dfac635e5a94a46fb1d61e4030b', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -216,7 +216,7 @@ export class DuetEditableTable {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-table", { key: '6e53631c212527e8702f9e9c8a1b9bc2b390c830', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '990481c1affeb11d6a6541a36a8f0118c961915c', role: this.accessibleRole }, h("caption", { key: 'f7b1bc44ab9fef0194485fdd6e49e11a306e365c' }, h("slot", { key: '2caecec6e5c024bdde6fa6bf72917914e2626752', name: "tcaption" })), h("thead", { key: 'c892dcd586814dcecddc46fbaf0319b04b6d9f16' }, this.hasHeadSlotFirst && (h("tr", { key: 'bfbac21dbab8afab7f34e952bd5803954be4991d' }, h("td", { key: '0a491ed1c4855d55b4dbc493a52029d657a08cc5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '87c033e72a1bd3b87a51a4981b1b4939de66578d', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '2ab66f9b14fe592f7ee7e6293cdd56b3aed0190e' }, h("td", { key: 'edb3ae066371b6f5dc990f10f088246c0d9388d9', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'f57ebf07ee01c40cb47469b2fa07a706c4724dae', name: "thead-last" }))))), h("tbody", { key: '538b2de606132fcb272e5af1650cafb947fc5b2a' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '2f1a98dd550705933222f7179bc3ff4d6554d117' }, h("tr", { key: 'ecb9667d57ea85de7efa6fa0035fbfbb16c78a9e' }, h("td", { key: 'c78b25495de0621c55f70cce5131b1d192fc5e0e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'ed051b0e66c28fdbee565b33c1c394034a817a82', name: "tfoot" })))))))));
+            } }, h("duet-table", { key: 'abcb5c0dc22830d840bbf18144e66605207849d0', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '269ab86ebe745cfcf2e208e174e0914ea7b4fed8', role: this.accessibleRole }, h("caption", { key: '2753e748db0c5264c994a41b002e52a5641d2971' }, h("slot", { key: '567de210690137ae00e2ad40e2e2c1e1c733f3d7', name: "tcaption" })), h("thead", { key: 'ea6b829d344cd19619f667d75304614cbf60cc9d' }, this.hasHeadSlotFirst && (h("tr", { key: '84c66d116690df93737670dbbd0fc2b0e5c9f80b' }, h("td", { key: '3ab4954300f48b65cdc48f612045ef4296f3561d', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '9f32c90606e46036a34ca037bdfd61d4eae70fb2', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '8be7b6223bd2ba7109db839efde2baab0f04c40f' }, h("td", { key: '1d6b0626d4b9dfdedc24f1118b53558e3ad80a54', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '247e4a043cc716d504a4827c415a3d73e8285046', name: "thead-last" }))))), h("tbody", { key: '778fd5a880190cffa0f9649b37839b2a0abedbe5' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '8c5e4045377ec3547c5005836f389cac2221dc62' }, h("tr", { key: '71959adb135cbcd6b7e19c9c9d4dcd3e799e8720' }, h("td", { key: 'ff1dc8216a9c918c1d9dec4aaf77454fd728a9ff', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: '450238c070a9f72a326737a26b1f6ede2f9606d2', name: "tfoot" })))))))));
     }
     static get is() { return "duet-editable-table"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -53,13 +53,13 @@ export class DuetEmptyState {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '83c41a104ebe8f29f18a2d0754a822981edd2204' }, h("div", { key: 'c2b928a204ec58089c46368f0e7a73f2f6880633', class: {
+        return (h(Host, { key: 'bf9aa87672aa22b4e89cc0014f6918fd8389981f' }, h("div", { key: '21e1d1af1326ef9709a99695809cb6025bd8431a', class: {
                 "duet-empty-state": true,
                 [this.variation]: true,
                 [`padding-${this.padding}`]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-background": this.background === "none",
-            } }, this.icon !== "none" && this.getIcon(), this.heading && (h("div", { key: '8b6f183f2022ef6a5d00b93cb4b345d93e310d45' }, h("strong", { key: 'fd7369964488e3821b00cbf3493fa873ee5a969e', class: "duet-empty-state-heading" }, this.heading), h("duet-spacer", { key: '7b96f48b9587efa581fc84b2205a32e839e03ee7', size: "x-small" }))), h("div", { key: 'ea6a1f4c70a824c705e8f644f8e58f9768db8317' }, h("slot", { key: '77c8aa58fa27abf0635ea22f22fd7d5c06d151dc' })))));
+            } }, this.icon !== "none" && this.getIcon(), this.heading && (h("div", { key: 'dc994018199345c865ee6d242349dadd99f71b36' }, h("strong", { key: '4e758372f9785d9f54bfe969ddcb90a0ae1fee6d', class: "duet-empty-state-heading" }, this.heading), h("duet-spacer", { key: '7eedd7853ef4ea89bb434dc55a488132fa8a30ef', size: "x-small" }))), h("div", { key: '4d1817b68cd9e88627eb1725a06cd510ea10ed61' }, h("slot", { key: '4db106ff0912e6896ca74071580223340fb3df14' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'e7d2b6ecb24666f6a563d4923bb228bdf7e8820d', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'ac0f503ac6d41953e774ad46b418c8ea39ff4708', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b564273ca16fac8fbb500ab8bfc9dff72e579770', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), h("div", { key: 'e390d201c421bbd2086946b4548dc98d5c58fead', class: {
+            } }, h("legend", { key: '607df92d8f78aaad01e4c80e33c17da55a52e20f', id: this.labelId }, h(this.labelHeadingLevel, { key: '33cee42411e380076885a046790cb8006088c5ed' }, this.label), this.caption && h("span", { key: '52c809bbe842c11a84e7d1a5c3083bfe92472d36' }, this.caption)), h("div", { key: 'aa297b27900d3a28a48bf8102b75e900896393ff', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), h("span", { key: '9815f8bf073a39267673baf538de5908b52758e9', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '3af22b271c143a074adee18554408291e3faa660', class: "duet-fieldset-label" }, h("span", { key: '939a883743e233ba83e8ff3328b18842b0c4eae4', "aria-hidden": "true" }, this.label), h("slot", { key: '822892f650b6c0f733cc58a1aee1654e21d1f1f6', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: 'bc40348b978fc775d1007cdf3949e95d4d3b54e0', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3119b1a7963015c24d6324d5de47fc53cdfd748e', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'fa922540a117205680098064372a70aefc0953ae' }), h("span", { key: 'ad8d4d59379d7a9f89e618754d46404eb5c3c664', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c36abae3849393120d72e3781305cb2ce88b384c', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -48,7 +48,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '96ed40ea2f9ae846c2ad9654c04511e312933fcd' }, h("duet-visually-hidden", { key: '2092c91fbf71c47a422748e27741c8a2695d4d5f', "aria-hidden": "true" }, h("input", { key: '1e83b554493c852b23e14bd801f8c48a42c8790e', ref: input => {
+        return (h(Host, { key: 'f17176210e5f0675eb847b4d9d60594a226e3dab' }, h("duet-visually-hidden", { key: '3a0eef27ad35e9348f9047f8ad2dcf13c5a9ad76', "aria-hidden": "true" }, h("input", { key: '4c67d86c2f388fbd4e2914013b0611e973a24e35', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

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

@@ -160,16 +160,16 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '803a027abb0c9d387f880a40cf4fa48cfdc96ab0', class: {
+        return (h("footer", { key: '41644e999245cd90d4c97839293f95bfa5d9d250', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '46da624a2ea71bc94e7029110f2aa4b264e21a0b', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'bb5d3de968dc4d893e002294a3ab5106ca3676ad', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '5cc2520a6657b134143ef4b54e8bc25cb4ec6f3f', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '6172bf0124114fa0d1447d4cde52541c06513707', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: 'a3c27f3c9fbf54263b0e632307fe2ed39aeb9e46', class: "footer-top-logo" }, h("duet-logo", { key: '5f7440b81f78389724830f3e843c71de140ae05d', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'f0a8b5cdda02fbd0fbff1015320572900e12a16e', class: "footer-top-right-container" }, h("slot", { key: '2c9e48c0350b76dbb74c59cfbca727d1c579b7a5', name: "info" }), h("div", { key: '4df2f42f2dc49b084a94de90de892adac97866c9', class: "footer-top-items" }, this.processedItems &&
-            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '51d5f56fe14519205709b1cb02bcfa1b87e6a3c2', name: "extra" }), h("p", { key: '3e2b620a21d109d0f4119d5b2a8a1a5c1404ec5c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '9a5becef9ceb454715ee6f560e3f9df8ae72357a', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '34b3c5e0d44b6a0497b7983ddde14380175618cc', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'd7defe3bd130ba7fb71731f71860351dbca3d726' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '4c708db5c94a113edcda458bd9375cdb382a3237', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }, part: "top" }, h("div", { key: '8d7fa0e35487812a06867478b0d8c717e8cbc295', class: "footer-top-logo" }, h("duet-logo", { key: '88a405f43f8923aec01dfbe7637d8b693c24ee94', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '0945fb2a21d2621abd034763e50d30f047fa7734', class: "footer-top-right-container" }, h("slot", { key: '73eb607d6eae88968f7066c951f5f8ddf326f55e', name: "info" }), h("div", { key: '1c142d6053b4b3f9b0bae03289e9ad79849cade6', class: "footer-top-items" }, this.processedItems &&
+            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '86fc7e14e4fb80b35c4e81659c9e3b35d6c965c7', name: "extra" }), h("p", { key: 'f5ddbb6a4cbf19f70259d96ef786cd6b068f503f', class: "duet-footer-menu", part: "menu" }, h("span", { key: '9e2390e03d199fc50f6fb67181734a4ba71a38b8', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'c7b6bc951c3d2dc81abfcc4eac43d6d9061e9421', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '87ef405d79957865d7cfd81f07fb400b9aa2ab1a' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '53c2ae3a42969730299aa948b8b6d42e9d765d32', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -208,7 +208,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e83b3b47e6285da96df9121db761bc7c5feddd65', class: {
+        return (h(Host, { key: 'e64260236eda4217a2cb10444342c33d243da8cf', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -237,7 +237,7 @@ export class DuetGrid {
                 [`duet-grid-template-${this.gridTemplate}`]: true,
                 "duet-grid-no-row-gap": this.gridTemplateGap.startsWith("none") && this.gridTemplate !== "button-grid",
                 "duet-grid-no-column-gap": this.gridTemplateGap.endsWith("none") && this.gridTemplate !== "button-grid",
-            } }, h("slot", { key: 'f53c15eef6edec556ff4200a95675a2feb5574e4' })));
+            } }, h("slot", { key: '1cb11ce3685bf5043dfa3e36e6a0ff3653106b54' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-grid-item/duet-grid-item.css

@@ -21,6 +21,11 @@
   color: rgb(8, 42, 77);
 }
 
+:host(.duet-grid-direction-vertical) {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 :host(.duet-grid-direction-horizontal:not(.duet-grid-item-row-reverse):first-child) {
   padding-left: 0;
 }

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

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4b538b2691f1fe5d57e6d1bbdec0e4278128c0c8', style: {
+        return (h(Host, { key: '59b2546565c78716d981db97ba3a66b9f4b06104', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: 'dabba4fd818496d5472f9328f3a400ce0dac9bc0' })));
+            } }, h("slot", { key: '78c0ca977366f49a62d91c19e42b7140455c0e7e' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: '0688ea9a9c1b36b5f8ca555051c1efa338bd1f57', class: {
+        return (h(TagName, { key: 'c921aaf37180daaa075fa9973069ff1ead3050a1', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -69,7 +69,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, this.preHeading && h("span", { key: 'ca9674066e83408743dda180faa73befac1f6ee2', class: "pre-post-heading" }, this.preHeading, " "), h("slot", { key: 'e2903a1c33bc8e3681523f2ab59ce83ad258bc87' }), this.postHeading && h("span", { key: '623bec656c67630d780b7922c922bf62da571dec', class: "pre-post-heading" }, " ", this.postHeading)));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, this.preHeading && h("span", { key: 'a39345b73db50edae14806161481c4f5ec2aea71', class: "pre-post-heading" }, this.preHeading, " "), h("slot", { key: 'f36300eafdc9fea4a9b8fde902cd1872bb586b65' }), this.postHeading && h("span", { key: 'e8f5b8d19838e6c3d8e049975dcc5740bfd00363', class: "pre-post-heading" }, " ", this.postHeading)));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -284,7 +284,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'f6cddcb9c3f7095554a386ee08f94edd696de30f', role: "region", class: {
+        return (h("div", { key: 'c9ddbcc16c2911a20e497cd8aa384fa5c07d33aa', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -302,17 +302,17 @@ export class DuetHero {
                 "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
                 "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '8e546e1f6a87372506acedb5ea3e36bc2886f789', class: "background-area" }, h("div", { key: 'c25e0f3339fa89a39a5b46ad27648300a7c489b8', class: "background-container" }, h("div", { key: '31200db09804314fe8b9a015aa7b250f3343691f', class: "background" }, h("img", { key: '5f1b008fe67fb54336d65d0a91f13921293ac03f', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'c62590322740c9e3d1938e5f89dc13885abf07b6', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '8f7994ab77f57be6ea58dbf8102415bcf7eb7ee6', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '01a855e32e56a513ec6cbbe3108b2d7f81af9154', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '863ce7546a76b161f64375733f35f861574c2fd4', class: { background: true, [this.layout]: true } }, h("div", { key: '00f7dcf3f138928620d9427e17c330dca44a1e51', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '0c6c33ed4275e93f68f3d2cec43b879bbc74c60c', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'd4fad75a79b2b33cb6e31d1265842af3a5535873', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '7af50eabf0b09917bd5cebe2b44c55b6f0839231', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '90eb7934807f9e153fd8e53672c5597651aaf8c0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: 'ce6e8cdcbd80b573448acb33539f59f06b28df9c', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '139e86a27857835a90d453bab2fcdbc555f41e96', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'b0acf2f12e86bd067f963613d12a85b2db616755', class: "background-area" }, h("div", { key: '5ca70d15eca85878c065441b64121bf935d07d32', class: "background" }, h("div", { key: 'fda4ef9233986b3d1ac3111b374018b6b4296295', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '638a9905eab07c7fee8140423b11b1e28fdedb65', class: "brand-shape" }), h("div", { key: '9a40f25f71ebaf02e17101a48f2cd15aa1b8de83', class: "brand-shaped-image" }, h("div", { key: '520668ba497de55d0c671a87fe4a397a901de7cf', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'aa2e5b706988a62baf70633a4d175ee1f935424c', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: 'f46858232e9b0c0e014497eb373f276a0253e25c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '8930f498a1b3d8c17cd6bfb2ca90011ec953becd', class: "duet-hero-image-mask" }, h("div", { key: 'c96d8a199eb919a14a9b372961b7e2e97622edf9', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '1960489a3dcd637d0d4c8cd90d4850563d96f62b', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '72393575c1cda007fe0a93f50fd29f2254e57635', class: "duet-hero-back" }, h("duet-button", { key: 'bb9c38f25da6cd86a6a1d9c550e39be5e553df52', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'a11039ca72275168553d2bba06cd909229dc1925', class: "background-area" }, h("div", { key: 'a21ad76654ac39c2fa21795f1cca235dc92e6404', class: "background-container" }, h("div", { key: '12d3583034b68b6fb747c749c0449146c40cb471', class: "background" }, h("img", { key: '8961eadf230127f3783efad4c48be759c4657e2a', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'bdfeab66795ec39e3f0383d9c2ef713733eb1a87', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'f08f6d3f621e7dac9a46f1942d87a6ec8cc8afa1', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'dcb0f245be411d836d24d7adb5c98b82841d6038', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'a5c5eccc8dcf20d10c7be435873c815eaf0713e2', class: { background: true, [this.layout]: true } }, h("div", { key: '358763fb7ceea2e54bb6d5249a3b4281de220758', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'a11b4ea782b4e6887ec4d6573188adeec90577b1', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '7afb89a0beb1d7675c33fcc831880c8126f1299a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'd9f4649e3eb88d062cbde9eb311f195357f67d5d', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'e75eeac505d3b021f0a7de2c195b9846b77c7c17', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '3c7d8d8ef1ccb2a63c0cde7ce064adb3ac49ba9a', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '23ff81f55a6f02a5fee73f17ea54a96cee164b85', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'd1d02c374a68c1b68fb2f9d848e5a7c357b5a220', class: "background-area" }, h("div", { key: '9f53455c7fca9008387d26b0dfc89c104076c248', class: "background" }, h("div", { key: '80d50fdf1c366ac730e88fff3d59f10f725f66bb', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'b079b624311717908bb1e1c37a0c56ad560ed44e', class: "brand-shape" }), h("div", { key: '247c5196610c63556bf2f66e2d8334d9cce8bdfa', class: "brand-shaped-image" }, h("div", { key: 'a83da29f05f36125276f4e74096648b30a8e9898', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: '150f6775a489981cbeaa8aa03f188f165d48aee0', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '558787b0fd8e59329b907d7dda223526d14b632d', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '12abfe5fb1240e186528ecbc2119c0797480e77f', class: "duet-hero-image-mask" }, h("div", { key: '0592878e99fd51f01ce16c2bf2ac1ae44c4636a1', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: 'd7a6838d0f589bb56ea831375e8a6237fe3c4bf2', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: 'dbef4d7459000d59a63deb5834086f5e607f8a0a', class: "duet-hero-back" }, h("duet-button", { key: '19481b475ec5fa1a83ee3d94d6170e823d80e5ae', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'cac362aaa6b377b1dba3651f712e386182d9a0dd', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '402006ac87cd15880b91d0267f2a1128870c7de7', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '041bfe57134d086c3d94d2ee33d68a067dcccfba', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '20f0e190fec2a99d7b4cab63daf81ca8907fd58a', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '1e7cbfe931e89c9bffd4ae4cd5a1ceff2c910534', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'ecd154b6b7291eb2de4e8290562a1d1ee3930d8c', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '4a2a625be57f1c26a8e8daab58e714ef99dcf103', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '73bd53a15848745effd4c211434de70a82e3cb9f', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '6d56faeee194fcf3af381a19bfed5aa0b25f7414', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '5c9877bead31171f246c3b2519956cbcea6cfd4a', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: 'c168f8e3f59e2d27cb8cb6d13be251628b044ccc' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '2c8a214eaa9fb3db915ecda2efa67a6433e9fe81', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'f1afc26bae892d9ae01824cae17226859bcb2156', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '8ce3263c60dc312e31098663adadec75d34c9e0e', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'a9faf36bb7d72156356b527ef585f4db2f07885f', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '10e35d0acadfbe28c7c3c9a5725190c00cc35214', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'd289ee15b7e8ae4e821195252e132ba6dfd4bb13', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '66f747db21ef3d390d01c78ff7b05879a4d435c5', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'a61351c8a3463e0d7b3881d4ed2eb430a4d708f8', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '5e17ebff3513457595a670b8b180ad4c900bb5ac', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '7cb299e23a2062bdf5a7831891b9a3590ad51ad5', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '132f4b0f22736d84217d2ef92fb137bb37ae1bfa', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: 'ba4d8449b00fe95aa8e9e2b4c0f43143e851c44f' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'da7c7c2652fe88ee7a097e696e56c301d8d813b9', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", Object.assign({ key: '6cb23cf63b47de3c8ec26c3089ac5e162c117039', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '559b443673459389d61eea691ea9c8342f97f240', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: 'b02c3a2b4e9722c7fc64b62e708c2d69d668b5a7', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'a8869163ed1e35a8987e126305221199705f4a88', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }