@duetds/components 10.4.0 → 10.6.0

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

@@ -4,9 +4,16 @@
 import { h, Host } from "@stencil/core";
 import { DuetStatusLabels } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
+import { checkNamedSlotElement, getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
+/**
+ * @slot default - Badge content.
+ * @slot tooltip - Alternative way to provide a tooltip for the badge, takes one duet-tooltip.
+ */
 export class DuetBadge {
     constructor() {
+        this.hasTooltipSlot = false;
         /**
          * Theme of the badge.
          */
@@ -24,6 +31,13 @@ export class DuetBadge {
          * Controls the margin of the component.
          */
         this.margin = "auto";
+        /**
+         * Giving tooltip text makes the badge act as tooltip button. The badge's text content will be used as the
+         * tooltips accessible-about-label - if you want other accessible label, use the tooltip slot instead of this
+         * attribute.
+         */
+        this.tooltip = "";
+        this.getBadgeText = () => this.element.textContent;
         this.getVariationLabel = () => {
             if (this.variation === "subtle") {
                 return "";
@@ -37,8 +51,20 @@ export class DuetBadge {
     /**
      * Component lifecycle events.
      */
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.hasTooltipSlot = hasSlot(this.element, "tooltip");
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
+        if (this.hasTooltipSlot) {
+            const tooltip = getElementsFromNamedSlot(this.element, "tooltip")[0];
+            tooltip.badgeElement = this.element;
+        }
     }
     /**
      * render() function
@@ -46,12 +72,13 @@ export class DuetBadge {
      */
     render() {
         const backgroundClass = `background-${this.background}`;
-        return (h(Host, { key: '446fcb8a0becb11a4043774efb1611dd9d89d82d', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '56ca2601a6f378068ce6d1c695089c0d131e9b7d', class: {
+        return (h(Host, { key: 'a560a9bf8c66e7b54260cf1a51c2bb4728d204bd', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '6acc7c0b3470e48d82386d808f0b997da64d01bd', class: {
                 "duet-badge": true,
                 [this.variation]: true,
                 [backgroundClass]: true,
+                "has-tooltip": !!this.tooltip || this.hasTooltipSlot,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-visually-hidden", { key: 'b1105a9f4a43ee6f9379cb8c02a06328830bbaa6' }, this.getVariationLabel()), h("slot", { key: '2922cf32e24472ae3c8685a1ea90a27c0112b740' }))));
+            } }, h("duet-visually-hidden", { key: 'ffef5f8b2e1f4daa1ad9c6422663bdd68279d97b' }, this.getVariationLabel()), h("slot", { key: 'c29a964054979e3453dc6d1e3e26deb37db4d6da' }), (this.tooltip || this.hasTooltipSlot) && (h("span", { key: '6aaefca53e94bf5a1d25b19f3f3b6182bdc24d89', class: "tooltip-wrap" }, !this.hasTooltipSlot && (h("duet-tooltip", { key: '2dcff5145d02f2dc6be7c9459dfe96d57873d7c9', "accessible-about-label": this.getBadgeText(), badgeElement: this.element }, this.tooltip)), h("slot", { key: '618248018df97f7071166094bf62ac615577371b', name: "tooltip" }))))));
     }
     static get is() { return "duet-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -167,6 +194,26 @@ export class DuetBadge {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "\"auto\""
+            },
+            "tooltip": {
+                "type": "string",
+                "attribute": "tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Giving tooltip text makes the badge act as tooltip button. The badge's text content will be used as the\ntooltips accessible-about-label - if you want other accessible label, use the tooltip slot instead of this\nattribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }

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.
          */
@@ -130,19 +135,19 @@ export class DuetBanner {
                 src: this.image,
                 alt: this.imageAlt || "",
                 loading: "lazy",
-                class: "image",
+                class: `image ${this.imageFit}`,
                 role: this.imageAlt ? undefined : "presentation",
             },
             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: '7bb7e73a6f4d35a44a152b488d46ad622f2cb50b', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '739f618adf7c4723262b4ec6295cf4864c361526', 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: '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" })))))));
     }
     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,26 @@ 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\""
+            },
             "sources": {
                 "type": "string",
                 "attribute": "sources",
@@ -398,7 +423,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: 'bee5edcaaa257aef537393e9620b269c242dff1d', role: "listitem" }, h("div", { key: 'fe46fa6ccf1f40968db1b82d27b11c5a5a450594', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '0f01a2a92376855fc341815886b031498a5085fd', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: 'cffeeca1d48de91945115a38bfcb1ae5efe702db', class: {
+        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: {
                 "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: 'ee27c63d28c4c9187a8242a811532322749f94fd', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'e0a220aa059a782dc8716f9fcda3e945bc048f40', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '86454db36ecfe921c4b1719f1d9b7807da79a272' })))));
+            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' })))));
     }
     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: '36f67b82a722d5c4017bb4cec37fd7149572d264' }, h("nav", { key: 'f8fe3f4e521969a60d9428a354a88152171613ec', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: 'e7ae98090732542452a2a94210f21bc4d877987e' }, h("nav", { key: '20edb0b05a6c3e6589e7d6be4e875bbfe89e263c', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: '78f711e9262e47c989705552d2ab75e65ae17fbe', class: "container" }, h("div", { key: 'bfc70b5d984cc57ef2591f4a3ecf452db9ae0ed6', role: "list", class: "list", style: { color } }, h("slot", { key: '96e85ea897f84aef0111f41d1e91ac2a263e8d66' })), h("div", { key: 'b99f56d5dba834d934872b86fcb8e46205ae3084', class: "bottom-border bottom-border--container" })), h("div", { key: '1d96cf880260a6fa1fb39cbc0e76e7b5df8f208c', class: "bottom-border bottom-border--nav" }))));
+            } }, 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" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -343,6 +343,11 @@
   background: transparent;
   border-color: rgb(255, 255, 255);
 }
+.duet-button.duet-button-negative:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(255, 255, 255, 0.8);
+}
 .duet-button.destructive-primary {
   color: rgb(255, 255, 255) !important;
   background: rgb(214, 28, 82);

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: 'e0a035450d6e7305b25de43ed55f4ffe7a15a0e3' }, h("div", { key: '6c5d998d494deab47f1384005e7d2dfb95246c7b', class: {
+        return (h(Host, { key: '70c2370b0a61707b44ed89544cf0ae0d3eb5b739' }, h("div", { key: '440dfe7d27ede12ff24de94bd9b598b9a630fdf4', 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: '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" })))))));
     }
     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,20 @@ 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: "lazy",
+                class: "duet-card-image",
+                role: this.imageAlt ? undefined : "presentation",
+            },
+            sources: parsePossibleJSON(this.sources),
+        };
+        return (h(Host, { key: 'd61c941d4cbcd29c34375c93cf2c414b553e6825', 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: '3e8e63bc3077e7ee7008816f3f1c0928a9ac6cad', 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 +175,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: '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" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +260,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 +456,31 @@ export class DuetCard {
                 "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 +517,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 +649,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"
                         }
                     }