@duetds/components 10.5.0 → 10.7.0

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

@@ -77,6 +77,11 @@
   object-fit: cover;
   object-position: center;
 }
+.duet-banner .visual .image.contain {
+  padding: 16px 20px 0;
+  object-fit: contain;
+  object-position: center bottom;
+}
 .duet-banner .visual .icon {
   position: absolute;
 }
@@ -137,6 +142,10 @@
     width: 100%;
     height: 100%;
   }
+  .duet-banner.size-medium .visual .image.contain, .duet-banner.size-large .visual .image.contain {
+    padding: 28px;
+    object-position: center;
+  }
   .duet-banner.size-medium .visual .icon, .duet-banner.size-large .visual .icon {
     top: 36px;
     left: 168px;
@@ -174,6 +183,9 @@
     width: 100%;
     height: 100%;
   }
+  .duet-banner.size-large .visual .image.contain {
+    padding: 48px;
+  }
   .duet-banner.size-large .visual .icon {
     top: 40px;
     bottom: auto;

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

@@ -47,6 +47,11 @@ export class DuetBanner {
          * Image. Example image is 512x341;
          */
         this.image = "";
+        /**
+         * Will the image cover the whole image area (possibly getting cropped), or will it be contained without any
+         * cropping (possibly not filling the whole area).
+         */
+        this.imageFit = "cover";
         /**
          * Icon.
          */
@@ -129,20 +134,20 @@ export class DuetBanner {
             img: {
                 src: this.image,
                 alt: this.imageAlt || "",
-                loading: "lazy",
-                class: "image",
-                role: this.imageAlt ? undefined : "presentation",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
+                class: `image ${this.imageFit}`,
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: '6c5c51b5270034eca60358d32acf69b0b87cfe37', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'd3357af952f4d21a284a3c07a4840be8c9d96671', 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: '129fd9d09e47a09e8109741d832e6adbb254c2f7', class: "visual" }, h("div", { key: '34a38d97f6591aa3cf06542ccc21d2be6526775e', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '4e74d10a68cbd875eafda59dff824d20f2259534' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '2f4c682fe9c434b13d2a40172ed703fc48f49625', 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" })), h("div", { key: '527007e8b696a194e63cb513d32c8072e3900fa0', style: bannerStyles, class: "brand-shape" })), h("div", { key: '6c2ce761c87965936e5a77764bd07c4068fc5af1', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'f95cad851a8a235080682deabc5eb48f69f06090', class: "heading" }, h("duet-heading", { key: '35d3d015a16e2f723d2afa61b46b44706239063f', 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: '3968de3baeb3baca08829460f41c843df594c3a6' }, h("slot", { key: 'c19c73a90688fc2e2f45cd46215714cd0f23eee1', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '77df4cc82d30c81bd36f73fa7db4bbfb59a491d6', class: "description", style: { color } }, h("slot", { key: '21d38914241a35c9d5b8803d727abca2b8c7c249', name: "description" }))), this.hasActionSlot && (h("div", { key: 'aef144cc3dbb6453ed8e0b37337322da880f26d8', class: "action" }, h("slot", { key: '613875d267d920e780afe93b3eb4c4fadbb3d73b', 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"; }
@@ -324,7 +329,7 @@ export class DuetBanner {
                     "references": {
                         "bannerSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-banner/duet-banner.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-banner/duet-banner.tsx",
                             "id": "src/components/duet-banner/duet-banner.tsx::bannerSize"
                         }
                     }
@@ -379,6 +384,45 @@ export class DuetBanner {
                 "setter": false,
                 "reflect": false
             },
+            "imageFit": {
+                "type": "string",
+                "attribute": "image-fit",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"cover\" | \"contain\"",
+                    "resolved": "\"contain\" | \"cover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will the image cover the whole image area (possibly getting cropped), or will it be contained without any\ncropping (possibly not filling the whole area)."
+                },
+                "getter": false,
+                "setter": false,
+                "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",
@@ -398,7 +442,7 @@ export class DuetBanner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Array of sources for responsive images. Sources have the properties of <source> element.\nThis is an experimental feature and might be changed without notice."
+                    "text": "Array of sources for responsive images. Sources have the properties of <source> element."
                 },
                 "getter": false,
                 "setter": false,

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: '941cfe85ceb3fa1921b6afe71d2885f36a071966', role: "listitem" }, h("div", { key: '30ae1fd0a1a013d6fc7e2c318248c1c6eec5bbe5', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '074eaae1ca2fa2797b8eba7a1354b0d815b1936d', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: 'a69cd43b3f81311c55e245d1e292315cf885a972', class: {
+        return (h(Host, { key: '2b795c0f87ac80750f5b839cf8d1ec385e367787', role: "listitem" }, h("div", { key: 'ee8b861d332f77b124246663ddcfef6a17b3716a', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '4755193fc62139b5e2badbf61d60ec4ee864320e', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: '454b059fa473bb373414fbc150fcd977e09f6640', 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: 'bb4d4379b6b38d5f5a8a8852a3e8ae320b72a48a', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: '72e99845589045f22bfd119623a79c3f0206b812', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '3190e7c4331c2856b71b54a5bdf6232b332dfa00' })))));
+            h("duet-icon", { key: 'd1aed8186f26f44d47ee81b56822c34185d84f0b', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: '59450e94c94574264b094fbf9f2e95210a2fcd6c', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: 'c59924405c9e92ba9b9f97f199483ede43340d75' })))));
     }
     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: 'c98b2354a647046cdf36b9fc042a825d59f69016' }, h("nav", { key: 'e5b3ab730c684343f6f7b551e3a90e4f804c33e4', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: 'ab03b4aa8bcf48ddeff80051a517ecf300237412' }, h("nav", { key: '1d5340bff7dd6a6d9a1274f7828b95e03bf4a286', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: 'f31d96c0db9cd1c376cb303d8ecf24327d9c530e', class: "container" }, h("div", { key: '94307d00ca67a2caf0783be3dfd2ebe7568dc21f', role: "list", class: "list", style: { color } }, h("slot", { key: '1a5f46b90a2b35c16992b4af7766bcbd4d7925f2' })), h("div", { key: '15d920594f56343f362d726da3a4a8d87edb10d7', class: "bottom-border bottom-border--container" })), h("div", { key: '7bc1ccc417e8d621909d06bf2933ddd97ee6dbcc', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: '60f82a58dbb43c750705c5ed6474bf5ba12d430e', class: "container" }, h("div", { key: '101eba23f14489d117dc44c147538b706407ec49', role: "list", class: "list", style: { color } }, h("slot", { key: '5880a8ee0defaffd580df6b65637c293f142f65d' })), h("div", { key: '5f2d386090b2e1a53cc327e976da14b33fe59c09', class: "bottom-border bottom-border--container" })), h("div", { key: '1bd939603a8c00a99060b3bb6dbdfa157efa0b41', 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.js

@@ -63,7 +63,7 @@ export class DuetButton {
          */
         this.expand = false;
         /**
-         * Keep the button fixed width even on mobile viewports.
+         * Keep the button fixed width even on mobile viewports. Fixed width is always used for variation plain.
          */
         this.fixed = false;
         /**
@@ -316,7 +316,7 @@ export class DuetButton {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
-                "duet-fixed": this.fixed,
+                "duet-fixed": this.fixed || this.variation === "plain",
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
@@ -585,7 +585,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonVariation"
                         }
                     }
@@ -734,7 +734,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonTextCentering": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonTextCentering"
                         }
                     }
@@ -760,7 +760,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonWrapping": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonWrapping"
                         }
                     }
@@ -809,7 +809,7 @@ export class DuetButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Keep the button fixed width even on mobile viewports."
+                    "text": "Keep the button fixed width even on mobile viewports. Fixed width is always used for variation plain."
                 },
                 "getter": false,
                 "setter": false,
@@ -1151,7 +1151,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonIconSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonIconSize"
                         }
                     }
@@ -1177,7 +1177,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonSize"
                         }
                     }

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: 'b082df5828c66c540240a355c2143bdc97cdeda2' }, h("div", { key: '318c40bc242a649eb1e74191703e77ef9f567dac', class: {
+        return (h(Host, { key: 'd3e96c80e032ccbcd8acf8a4f3b8d8d358548786' }, h("div", { key: 'b6caf5e67fcb292b3bf73dc0b9bf27fd06be5590', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, 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" })))))));
+            } }, h("figure", { key: '0b1740d79f890107d1ed0f48b2d0bc9904a6c6c4', class: "container" }, h("duet-icon", { key: 'fc90c293c0008e13b6b7355e4ab32a09d23aaf5e', 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: 'a9de71b59c2208091da32a2e9c0acb2fe121d7f7' }, h("slot", { key: '45e54b298e547f5a1dd2f33abf07f48a1bfbea84' })), this.hasAuthorSlot && (h("figcaption", { key: 'f495d161f2993d6cfe240cbd7fe583b447b65186', class: "author" }, h("span", { key: '95b14fcee9c5ed6bbaf04f1711348164a07bf592' }, "\u2014 "), h("slot", { key: '1371283e50a2b7580799984ad815542ccb9e87db', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,7 @@ export class DuetCaption {
                     "references": {
                         "DuetCaptionSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-caption/duet-caption.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-caption/duet-caption.tsx",
                             "id": "src/components/duet-caption/duet-caption.tsx::DuetCaptionSize"
                         }
                     }

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

@@ -509,6 +509,9 @@
   padding: 0;
   margin: 0;
 }
+.duet-card-image-mask picture {
+  display: block;
+}
 
 .duet-card-image {
   display: block;

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

@@ -6,8 +6,9 @@ import { Build, Fragment, h, Host } from "@stencil/core";
 import { duetBlock, duetHeadingLevels, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
+import { DuetPicture } from "../../utils/picture-utils";
 import { getElementsFromNamedSlot } from "../../utils/slot-utils";
-import { sanitizeString } from "../../utils/string-utils";
+import { parsePossibleJSON, sanitizeString } from "../../utils/string-utils";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
@@ -151,10 +152,21 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: '526da1b920f1be4a18d200ab81bc1951649cf3b2', class: {
+        const pictureSource = {
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                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: 'e665c5842a71a942c9098bb06045587327958776', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '1cfae581c87423ea9d466fd39084b28505b01a77', 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,
@@ -164,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: 'e310f18c792507a78333290fc56a3866efe302ca', class: "duet-card-image-mask" }, h("img", { key: '84eaf59d2df2a9dd85cf0703b9b1641dff78c473', src: this.image, class: "duet-card-image", loading: "lazy", alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'ef549d1a5f7efeb35a2fd0ca6ab2c22566955029', class: "duet-card-content", id: this.cardId }, h("slot", { key: '746a25475887db3e0ba914e273eb32571accbb56' }), this.hasFooter && (h("div", { key: 'd30c96b12ae73fc4bdfbfd22f25b862287b8fce5', class: "duet-card-footer" }, h("slot", { key: '887615186784331005c099562f296bdd3d216c98', 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"; }
@@ -249,7 +261,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardVariation"
                         }
                     }
@@ -445,6 +457,50 @@ 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",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetSource[] | string",
+                    "resolved": "DuetSource[] | string",
+                    "references": {
+                        "DuetSource": {
+                            "location": "import",
+                            "path": "../../utils/picture-utils",
+                            "id": "src/utils/picture-utils.tsx::DuetSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of sources for responsive images. Sources have the properties of <source> element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "background": {
                 "type": "string",
                 "attribute": "background",
@@ -481,7 +537,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardPadding": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardPadding"
                         }
                     }
@@ -613,7 +669,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardToggleEvent"
                         }
                     }

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

@@ -637,7 +637,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -658,7 +658,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -679,7 +679,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }