@duetds/components 10.6.0 → 10.8.0

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

@@ -134,20 +134,20 @@ export class DuetBanner {
             img: {
                 src: this.image,
                 alt: this.imageAlt || "",
-                loading: "lazy",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
                 class: `image ${this.imageFit}`,
-                role: this.imageAlt ? undefined : "presentation",
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: '7bb7e73a6f4d35a44a152b488d46ad622f2cb50b', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '739f618adf7c4723262b4ec6295cf4864c361526', class: {
+        return (h(Host, { key: '021aafd46f614c2d52ccd2d014574a7a095e2883', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'ea207c896e6b1624a27d4b6ceb79836ab152f207', class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, h("div", { key: 'd78595a1aabf12715243be11008f484d23596a1b', class: "visual" }, h("div", { key: 'ef55a2809492d94f8c249f1cad969f52c7c7b82d', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '80aa252e2ae80b3deeea7949866fe797dfff3500' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: 'e7052f4bbe89af540520f5e54f852263623b7bff', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), this.imageFit !== "contain" && h("div", { key: '99d09920043743c985e0d3dba395a3985fb498a9', style: bannerStyles, class: "brand-shape" })), h("div", { key: 'b71115c0291aa50a6fb14fd9da4f5ca3e17966b8', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'ab430cc7698686f5e352cd8b1a832a75fba1016e', class: "heading" }, h("duet-heading", { key: 'd524b78d7d934270dece2274467f32450d67d5c3', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'c9f8c556560a5cf18924a0f3b4c71bc5b4a66e34' }, h("slot", { key: '4e1425677afc11f145db287ebf17df9917f40529', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'b0ec390d54156a3df44821ab41b5bee3245a880b', class: "description", style: { color } }, h("slot", { key: 'd284da9e4b546bbc02c8741aa7aa368de497ea52', name: "description" }))), this.hasActionSlot && (h("div", { key: '3ff5952fc3f6ab7a7948317ef7907f297df37a30', class: "action" }, h("slot", { key: 'e912017d264737322c63eec6e3d3a13a225db01a', name: "action" })))))));
+            }, style: bannerStyles }, h("div", { key: '525c58ab8a5aaa6cf08bab777f9ea3dd071f75ec', class: "visual" }, h("div", { key: '89b977717483d9ffcedeae98f7d2a36263b0f3d3', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '7f1d73ce70cf6687500eef1d0fc546e4bdbb6ea5' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: 'd6bff8e9ef67f0588437090ebb24577930cd949d', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), this.imageFit !== "contain" && h("div", { key: '9cb97c2fefe6058b2d1c9b0e1a0c517d732c8b3f', style: bannerStyles, class: "brand-shape" })), h("div", { key: '2674a03efa17932dd1654e18a72115646a806fd3', class: "content" }, this.hasHeadingSlot && (h("div", { key: '9de6d6fe0940b868b74205ff45c48986776c67a7', class: "heading" }, h("duet-heading", { key: 'dca384f371f65d7f40e59c97603ffde9536c10ae', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e5f9d70b35eb5e3507cc9c4ae78554debd08f7c7' }, h("slot", { key: '26d9d93896e0f095112db72501c8c9de765eba16', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '1a82c4532fa9862d0207675f89308ee8cd071302', class: "description", style: { color } }, h("slot", { key: '78febb3eca846bffd9555b8114c9ecaf33e55433', name: "description" }))), this.hasActionSlot && (h("div", { key: '2f25d1c449e2ff59bbd41d39da665e1a8822a7a2', class: "action" }, h("slot", { key: '2951e812095eaf2e55a40575e6948e83bfd27b2a', name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -404,6 +404,25 @@ export class DuetBanner {
                 "reflect": false,
                 "defaultValue": "\"cover\""
             },
+            "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",

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js

@@ -44,15 +44,15 @@ export class DuetBreadcrumb {
      */
     render() {
         const Tag = this.href ? "a" : "span";
-        return (h(Host, { key: '9d25b651fd5b242297c25eb3ea99ffc6f1ca48af', role: "listitem" }, h("div", { key: '84a91d5dd5578cb8294cea0e48d0ee4d5bb2fd23', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: 'c443a924a8354ec1218f8ff092ba4f8c8c6ee848', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: '266f23bcf053b651c24cdf70aaf540a618ed0334', class: {
+        return (h(Host, { key: '458e4f048570629b3f8002588b750757021e0bbd', role: "listitem" }, h("div", { key: '4fade87714b80818fda47fbfb3789b0f8b27f489', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '9269d8c80d836f44019a394e8a26e878fced07f2', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: '23772d6dae87c75499adb847dd4a49acb4ffabff', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
                 "icon-only": this.icon && !this.hasSlottedContent,
             }, href: this.href || undefined, "aria-label": this.accessibleLabel || this.element.textContent, "aria-current": this.href ? undefined : "page" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: '4db885eb507c009ff6f8441052b4c402bf6fd677', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: '1dd57ad658f67683907cf1d7b9db5726d5d4d309', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '71d21629fc5c66ebe08d0c7eb04a9293e0246cf5' })))));
+            h("duet-icon", { key: '5d413bae291a7d10dc2a54b9b0389128defc9e82', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: '9fef8271d98fa98c6a31623a937156413718f37c', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: '47df258e2b4f9bb7d75f4869abd16c8ed84e8550' })))));
     }
     static get is() { return "duet-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,11 +62,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: 'e7ae98090732542452a2a94210f21bc4d877987e' }, h("nav", { key: '20edb0b05a6c3e6589e7d6be4e875bbfe89e263c', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: '4858d49a29bb34e845436ec070f27e75a6fbe504' }, h("nav", { key: 'fdf5c15b2ee7adcbf8e4b0c230735f8d26ccd83f', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: '9af54a322da0c7be2e37687a9d67e16214de644c', class: "container" }, h("div", { key: '0e7243aa0cb721abb7b413e4bd109f4594f6c2ac', role: "list", class: "list", style: { color } }, h("slot", { key: '8ed1299ec1deda2d43ecabdcc1d49c15a4467b23' })), h("div", { key: '24b4efdf7a6f85c6ea8badf769d0dd8b098252ee', class: "bottom-border bottom-border--container" })), h("div", { key: '510ebbb8148a84730d5bc1f53c3fb01a76c7bcdb', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: '3235e10bb08008d3b3854f888bf3e4b934aed9e6', class: "container" }, h("div", { key: '60d548db832a4eca47caf48789d5082a7100b5ba', role: "list", class: "list", style: { color } }, h("slot", { key: 'd8170a022b3c9f2e737a29c353a0d2070f752a9c' })), h("div", { key: 'c76631c4b488b8f3ba0007de6c4a62aaf7abc4c7', class: "bottom-border bottom-border--container" })), h("div", { key: '1ca349ec39f209d18d6713f1a127932d4c6d08c8', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -627,6 +627,9 @@
 .duet-theme-turva .duet-button.plain.duet-button-negative {
   color: rgb(255, 255, 255) !important;
 }
+.duet-theme-turva .duet-button.plain.duet-button-negative:hover {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
 .duet-theme-turva .duet-button.plain:hover {
   color: rgb(140, 0, 30) !important;
 }

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: '70c2370b0a61707b44ed89544cf0ae0d3eb5b739' }, h("div", { key: '440dfe7d27ede12ff24de94bd9b598b9a630fdf4', class: {
+        return (h(Host, { key: '7c2142db52608760dec767f79a7bca3447a7cd5f' }, h("div", { key: 'f8198db62bb29ce33d65fc3c3cc3e32f87de2c5c', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: 'b3aa896544cb2cc6021eb50ea96e317fd256d266', class: "container" }, h("duet-icon", { key: 'cdffa280e6126af9e8e77bc6a96821cf7b229796', 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: '8b3d9b55675179e4ed743459009d4f278bf2b30a' }, h("slot", { key: '41a60c64671630e6199cb5bcc94a9d19f530b8f3' })), this.hasAuthorSlot && (h("figcaption", { key: '80d6481648829aead64c88db38312ee34253424e', class: "author" }, h("span", { key: '2bf9d1de8bfa5456ea8c69c9b2731e2b1a4bbef3' }, "\u2014 "), h("slot", { key: '091fcf50b602dccfb2d8ae005999539a0dde8efb', name: "author" })))))));
+            } }, h("figure", { key: 'e994ff471b5559524635c85974669c8057658363', class: "container" }, h("duet-icon", { key: '88762cb245c8695ac5a4e6e964429055b7256fa5', 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: '4b39bc138213d594a5eb81c9f0fe50e49342c626' }, h("slot", { key: 'fc14d22469315c162b71aa1b3bf09c8bcd0e1901' })), this.hasAuthorSlot && (h("figcaption", { key: 'b8fc8be9af52e97966a8ae61ad5ab3f88e7e8aa0', class: "author" }, h("span", { key: 'e0ca2034da2119ef9b5c6b9ddf004f46706a59fe' }, "\u2014 "), h("slot", { key: '6224eae7686973960ea35086635e3dbeeaa8e944', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,47 +76,47 @@
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (max-width: 20.5em) {
-  .duet-card.shadow-xxx-small {
+  .duet-card.shadow-xxx-small, .duet-card.duet-theme-turva.shadow-xxx-small {
     box-shadow: none;
   }
 }
 @media (max-width: 22.5em) {
-  .duet-card.shadow-xx-small {
+  .duet-card.shadow-xx-small, .duet-card.duet-theme-turva.shadow-xx-small {
     box-shadow: none;
   }
 }
 @media (max-width: 35.9375em) {
-  .duet-card.shadow-x-small {
+  .duet-card.shadow-x-small, .duet-card.duet-theme-turva.shadow-x-small {
     box-shadow: none;
   }
 }
 @media (min-width: 36em) {
-  .duet-card.shadow-small {
+  .duet-card.shadow-small, .duet-card.duet-theme-turva.shadow-small {
     box-shadow: none;
   }
 }
 @media (min-width: 48em) {
-  .duet-card.shadow-medium {
+  .duet-card.shadow-medium, .duet-card.duet-theme-turva.shadow-medium {
     box-shadow: none;
   }
 }
 @media (min-width: 62em) {
-  .duet-card.shadow-large {
+  .duet-card.shadow-large, .duet-card.duet-theme-turva.shadow-large {
     box-shadow: none;
   }
 }
 @media (min-width: 64.0625em) {
-  .duet-card.shadow-x-large {
+  .duet-card.shadow-x-large, .duet-card.duet-theme-turva.shadow-x-large {
     box-shadow: none;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-card.shadow-xx-large {
+  .duet-card.shadow-xx-large, .duet-card.duet-theme-turva.shadow-xx-large {
     box-shadow: none;
   }
 }
 @media (min-width: 106.25em) {
-  .duet-card.shadow-xxx-large {
+  .duet-card.shadow-xxx-large, .duet-card.duet-theme-turva.shadow-xxx-large {
     box-shadow: none;
   }
 }
@@ -549,6 +549,10 @@ a.duet-card:active {
 }
 .duet-card.duet-theme-turva.info {
   background: rgb(253, 247, 242) !important;
+  box-shadow: none;
+}
+.duet-card.duet-theme-turva.plain {
+  box-shadow: none;
 }
 .duet-card.duet-theme-turva .duet-card-heading {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -156,16 +156,17 @@ export class DuetCard {
             img: {
                 src: this.image,
                 alt: this.imageAlt || "",
-                loading: "lazy",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
                 class: "duet-card-image",
                 role: this.imageAlt ? undefined : "presentation",
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'd61c941d4cbcd29c34375c93cf2c414b553e6825', class: {
+        return (h(Host, { key: 'e665c5842a71a942c9098bb06045587327958776', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '3e8e63bc3077e7ee7008816f3f1c0928a9ac6cad', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '10722ae1c42744e1924df0a38313eb68acb8a4b1', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -175,7 +176,7 @@ export class DuetCard {
                 "duet-card-has-bg": this.background !== "gray-lightest",
                 "duet-card-has-icon": !!this.icon,
                 "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: '430d6550590b6ba8ff0582c6bfe1de5556149597', class: "duet-card-image-mask" }, h(DuetPicture, Object.assign({ key: 'b2c6457f6fad9275a9fdaff2b1a3a492dc08a1e1' }, pictureSource)))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: '705605a43265107ea95fa7d9147cb7cbe82ad586', class: "duet-card-content", id: this.cardId }, h("slot", { key: '2eeb551820975ccbcb3c72f4c2ae4f315848d024' }), this.hasFooter && (h("div", { key: '4ef3a54510d5747516a767282d7392e81eb7ced2', class: "duet-card-footer" }, h("slot", { key: 'f0f8e31a0beba199f3826ec58d277e848134ce38', name: "footer" })))))));
+            } }, this.image && (h("div", { key: 'a9a0b21ac68624cba6b3bfb9c0e8d3d87597cfe0', class: "duet-card-image-mask" }, h(DuetPicture, Object.assign({ key: 'efa16a802e16d5be73243c2c1e2c2bd7fe49839b' }, pictureSource)))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'a6ea5db0ad9150e7e5a4dd59ae42bb1c6603aac3', class: "duet-card-content", id: this.cardId }, h("slot", { key: '33a498070a2b68d6361247afe7bd12c440abad6b' }), this.hasFooter && (h("div", { key: 'f2ddb3f3e200fcab419911d5023831019cc4e9e3', class: "duet-card-footer" }, h("slot", { key: 'ac749be2398980321f3cfe4f6b3b679cd2803be0', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -456,6 +457,25 @@ export class DuetCard {
                 "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",

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

@@ -33,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '588662850d35631ef6cb3c242d050f4049af0f59', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '301f41ca7f4d90729bffe6940380d56b4d226407', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'b0c88fd8e22781c438ec744fc2b24b6263ecf272', class: {
+        return (h(Host, { key: '2142269327442a806b3ea159abe1c55920cd4ec7', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '5e80d429c85b08fdc7252dc4b63bae771186b611', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '059edd1d87fa195725d63016b61692f62d1a5728', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '389644f6a51bf281434c674aefc560e35dec4a6e', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '3a81e706e386b1e81377521a89875eb790f5e68e', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -146,7 +146,16 @@ export class DuetChoiceGroup {
         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")));
+        const ownChoices = allChoices
+            .filter(choice => !allChoices.includes(choice.parentElement.closest("duet-choice")))
+            .filter(ownChoice => {
+            if (ownChoice.type === "checkbox") {
+                console.error("Choice Group must consist of type=radio Choices. Choise type=checkbox is not allowed. They will be removed in a future Duet version", ownChoice);
+                // ownChoice.remove()
+                return false;
+            }
+            return true;
+        });
         let hasChecked = false;
         this.choices.clear();
         ownChoices.forEach(choice => this.choices.add(choice));
@@ -181,14 +190,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0d7434c28155b9472c8819d53c34843052a58d0d', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (h(Host, { key: 'bef9e6aed77ae942a881822af3fd9b2fd340088b', 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: 'd0abc308f9f4e0b001efb4923b0e5203ae1d00a6', 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: 'f8e3bbac49fdb91180c3caa1b32e7d6eb1305086', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '9ebac012a0024a84eaa3b320a9d1aca91bb48480', name: "tooltip", slot: "tooltip" }), h("div", { key: '9b811428dda8073221eedb0b5a64ddff1662828d', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '22ab1bec355e45e4bd35c68e2d9c86815b99852f' })))));
+            } }, h("duet-fieldset", { key: '18197d3bbcf9772c85e002a0df25e9df79dcb3a7', 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: 'f9a555c68c6f7312e0941a16752f5c2b3e488e93', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '041c890f290b5ecd750edd189288cfb2769aa60b', name: "tooltip", slot: "tooltip" }), h("div", { key: '01d3e4cad179c9aa864c80557831cbf10bf2b0f2', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '87f9ea13d22d029ba9025572432ebdde96456838' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,5 +14,5 @@ export const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = u
         .map(term => regexEscape(term));
     const regEx = search !== "" ? new RegExp(`(${searchTerms.join("|")})`, "i") : undefined;
     const highlightStyle = "text-decoration: underline";
-    return (h("duet-popup-menu-item", { id: activeDescendant ? id : "", active: selected, "data-index": item.id, "aria-selected": activeDescendant ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), accessibleRole: "option", activeDescendant: activeDescendant }, regEx ? (h("span", { class: "option-container", "aria-hidden": "true" }, h("span", { innerHTML: item.name.replace(regEx, `<span style="${highlightStyle}">$&</span>`) }))) : (item.name), item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
+    return (h("duet-popup-menu-item", { id: activeDescendant ? id : "", active: selected, "data-index": item.id, "aria-selected": selected ? "true" : undefined, "aria-current": activeDescendant ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), accessibleRole: "option", activeDescendant: activeDescendant }, regEx ? (h("span", { class: "option-container", "aria-hidden": "true" }, h("span", { innerHTML: item.name.replace(regEx, `<span style="${highlightStyle}">$&</span>`) }))) : (item.name), item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
 };

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

@@ -38,6 +38,7 @@ export class DuetCombobox {
         // the activeItem number is based upon the array.index of the array stored in processedItems
         this.activeItem = undefined;
         this.activeItemAnnouncement = "";
+        this.optionsFoundAnnouncement = "";
         /**
          * Defaults for the accessible labels for the select items
          */
@@ -45,17 +46,23 @@ export class DuetCombobox {
             en: {
                 heading: "Select:",
                 item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
+                activeItemLabel: "{name}, {current} / {total}",
+                optionsFound: "{optionCount} options found",
+                noOptionsFound: "No options found",
             },
             fi: {
                 heading: "Valitse:",
                 item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
+                activeItemLabel: "{name}, {current} / {total}",
+                optionsFound: "{optionCount}, valintaa löydetty", // extra comma to prevent unwanted conjugation
+                noOptionsFound: "Yhtään valintaa ei löydy",
             },
             sv: {
                 heading: "Välj:",
                 item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
+                activeItemLabel: "{name}, {current} / {total}",
+                optionsFound: "{optionCount} val hittades",
+                noOptionsFound: "Inget val hittades",
             },
         };
         /**
@@ -131,16 +138,24 @@ export class DuetCombobox {
                 }
             });
         };
+        this.optionsFoundTimeoutId = 0;
         this.onInputTyping = async (e) => {
             var _a;
             const newValue = e.detail.value;
             if (!this.force && !this.multiple && this.selectedItems.size > 0 && newValue !== this.getSelectedItemLabel()) {
                 this.selectedItems.clear();
             }
-            if (!this.force && !this.multiple && newValue === "") {
+            if (!this.multiple && newValue === "") {
                 this.value = undefined;
             }
-            this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            const filteredItemsCount = ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            this.listOpen = String(newValue).length >= this.minCharacters && filteredItemsCount > 0;
+            clearTimeout(this.optionsFoundTimeoutId);
+            this.optionsFoundTimeoutId = setTimeout(() => {
+                this.optionsFoundAnnouncement = filteredItemsCount
+                    ? this.accessibleLabels.optionsFound.replace("{optionCount}", `${filteredItemsCount}`)
+                    : this.accessibleLabels.noOptionsFound;
+            }, 1000);
         };
         this.onKeyDown = (e) => {
             var _a, _b, _c;
@@ -245,15 +260,6 @@ export class DuetCombobox {
         }
         this.activeItemAnnouncement = "";
     }
-    inputValueHandler() {
-        setTimeout(async () => {
-            const label = await this.getSelectedItemLabel();
-            if (this.input.value == "" && label) {
-                this.input.value = "";
-                this.value = undefined;
-            }
-        }, 200);
-    }
     handleDocumentClick(e) {
         //we want to remove all user text if they have NOT selected from the dropdown
         const path = e.composedPath();
@@ -372,6 +378,7 @@ export class DuetCombobox {
         this.input.accessibleExpanded = this.listOpen ? "true" : "false";
         this.input.accessibleAutocomplete = "list";
         this.input.accessibleControls = this.listBoxId;
+        this.input.spellcheck = false;
         this.input.id = this.inputId;
         this.element.addEventListener("keydown", this.onKeyDown);
         connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
@@ -388,6 +395,7 @@ export class DuetCombobox {
         if (Build.isServer) {
             return;
         }
+        clearTimeout(this.optionsFoundTimeoutId);
         this.input.removeEventListener("duetChange", this.onInputChange);
         this.element.removeEventListener("click", this.onInputClick);
         this.element.removeEventListener("keydown", this.onKeyDown);
@@ -558,7 +566,8 @@ export class DuetCombobox {
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
-        const activeElement = document.getElementById(`${this.activeDescendantId}`);
+        var _a;
+        const activeElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(`${this.activeDescendantId}`);
         if (activeElement) {
             activeElement.scrollIntoView({
                 behavior: "smooth",
@@ -570,12 +579,11 @@ export class DuetCombobox {
         if (!item || itemsLength === undefined) {
             return "";
         }
-        const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.itemFiltered;
+        const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.activeItemLabel;
         return labelString
             .replace("{name}", String(item.name))
             .replace("{current}", String(itemIndex + 1))
-            .replace("{total}", String(length))
-            .replace("{hiddenItems}", String(itemsLength - length));
+            .replace("{total}", String(length));
     }
     /**
      * Filter the items based on the input value
@@ -649,7 +657,7 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("duet-visually-hidden", null, h("span", { "aria-live": "assertive", "aria-atomic": "true" }, this.activeItemAnnouncement)), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, mainAxisOffset: verticalOffset, crossAxisOffset: horizontalOffset, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container", style: this.getMenuContainerStyles() }, this.listOpen &&
+            } }, h("slot", null), h("duet-visually-hidden", null, h("span", { "aria-live": "polite", "aria-atomic": "true" }, this.optionsFoundAnnouncement), h("span", { "aria-live": "assertive", "aria-atomic": "true" }, this.activeItemAnnouncement)), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, mainAxisOffset: verticalOffset, crossAxisOffset: horizontalOffset, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container", style: this.getMenuContainerStyles() }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));
@@ -692,7 +700,7 @@ export class DuetCombobox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtered\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} suodatettu\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtrerade\",\n    },\n  }"
+                "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      activeItemLabel: \"{name}, {current} / {total}\",\n      optionsFound: \"{optionCount} options found\",\n      noOptionsFound: \"No options found\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      activeItemLabel: \"{name}, {current} / {total}\",\n      optionsFound: \"{optionCount}, valintaa l\u00F6ydetty\", // extra comma to prevent unwanted conjugation\n      noOptionsFound: \"Yht\u00E4\u00E4n valintaa ei l\u00F6ydy\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      activeItemLabel: \"{name}, {current} / {total}\",\n      optionsFound: \"{optionCount} val hittades\",\n      noOptionsFound: \"Inget val hittades\",\n    },\n  }"
             },
             "accessibleLabels": {
                 "type": "unknown",
@@ -963,7 +971,8 @@ export class DuetCombobox {
             "popupMenuController": {},
             "selectedItems": {},
             "activeItem": {},
-            "activeItemAnnouncement": {}
+            "activeItemAnnouncement": {},
+            "optionsFoundAnnouncement": {}
         };
     }
     static get events() {
@@ -1031,9 +1040,6 @@ export class DuetCombobox {
             }, {
                 "propName": "activeItem",
                 "methodName": "activeItemHandler"
-            }, {
-                "propName": "inputValue",
-                "methodName": "inputValueHandler"
             }, {
                 "propName": "items",
                 "methodName": "processItems"

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

@@ -53,15 +53,16 @@ export class DuetContactCard {
             img: {
                 src: this.image,
                 alt: this.name || "",
-                loading: "lazy",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
                 class: "image",
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'f64dabbe00a4d4f03132a6adc7bc3b95bdd6042a', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '0f5bf8d1828462b3f5e6aa9f5d7e11b338a2b61c', class: {
+        return (h(Host, { key: '04096609d15dbb158a385792f711da26ee95dd95', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'a0878e116a425a2ed9652904f7bc7d3d93544354', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h(DuetPicture, Object.assign({}, pictureSource)) : h("div", null), h("div", { key: 'c7f1a34d6324e755b84db0dc4da6ccfe23c2caea' }, this.name && (h("duet-heading", { key: 'b5e344e3a442dd32b215a64c5ac5050004205cd2', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'c0691195632640e79ff0138fd59b974764f4e653', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '69b2e8b159c01ac6a10b0e9f5db6484e24d7ba88', class: "email" }, h("duet-icon", { key: '610229dce2bd62cdd469f1507a3d7ab2fb9bbf2e', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b8de1672468624fb4d187f2284d59057abc6fc02', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'f1f0f4cb51fb389b4af742d8aff457575ba2fea8', class: "phone" }, h("duet-icon", { key: 'bf01da4d50e3c15d6e5e6578e560746cd0290cdc', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b13decd3ea2cbe80e5eb96f4214db65bcf318918', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'e9d62c80a434400828e323a802e873df327e9c28', class: "call-to-action" }, h("duet-button", { key: '5603fe9f97b490a96cfb04cb6efbc98093d8e216', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '6fd00f636dd39f1ad02f62fa2a63cfe7f00f67b2' }), h("slot", { key: 'f91dc7abe608519b46f5bf421f09258cabdda749' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h(DuetPicture, Object.assign({}, pictureSource)) : h("div", null), h("div", { key: '152a894a38c39c7f16488b0507ea8a2c139d29c5' }, this.name && (h("duet-heading", { key: '8738ca48c85445b027021dc89b500332a6d6b449', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'a9f592ba12df7aeb59c5a5e2fad53ae1e52bab85', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'afc1e103364b705e988962ab9edfdd5e0dfbbf5f', class: "email" }, h("duet-icon", { key: '5cf4768948c4b002f742233dc4d4f279bbc45b54', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e2e59421cec8883de026f5f47a6da855545a68ce', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '5a4085420c24900f3ae971f5cf5b84a91a830da4', class: "phone" }, h("duet-icon", { key: '01c049683d092c7b71fcdbf24b9a8470bd8af2da', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '99c27b5983a2388e1349de7eb7b7db19d754b475', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '9996e7c2693ddb274ab8a803e0dc564bfc40c246', class: "call-to-action" }, h("duet-button", { key: 'c0730311ffec7410311d527e75a725332a849ac8', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '136c1d0c39ad396194d2f9f7e9ca180e82aa66a7' }), h("slot", { key: 'fc98de9e746468e61a869ed3f4678495fe9df91f' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }
@@ -148,6 +149,25 @@ export class DuetContactCard {
                 "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",

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

@@ -18,5 +18,5 @@ export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, o
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (h("td", { "data-day": printISODate(day), class: { "duet-date-table-cell": true, selected: isSelected }, "aria-label": `${formatterShort.format(day)}${isSelected ? `, ${selectedDayLabel[language]}` : undefined}`, role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
+    return (h("td", { "data-day": printISODate(day), class: { "duet-date-table-cell": true, selected: isSelected }, "aria-label": `${formatterShort.format(day)}${isSelected ? `, ${selectedDayLabel[language]}` : ""}`, role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };