@duetds/components 10.4.0 → 10.6.0

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

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

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

@@ -208,7 +208,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e83b3b47e6285da96df9121db761bc7c5feddd65', class: {
+        return (h(Host, { key: 'e64260236eda4217a2cb10444342c33d243da8cf', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -237,7 +237,7 @@ export class DuetGrid {
                 [`duet-grid-template-${this.gridTemplate}`]: true,
                 "duet-grid-no-row-gap": this.gridTemplateGap.startsWith("none") && this.gridTemplate !== "button-grid",
                 "duet-grid-no-column-gap": this.gridTemplateGap.endsWith("none") && this.gridTemplate !== "button-grid",
-            } }, h("slot", { key: 'f53c15eef6edec556ff4200a95675a2feb5574e4' })));
+            } }, h("slot", { key: '1cb11ce3685bf5043dfa3e36e6a0ff3653106b54' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -355,7 +355,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridAlignment": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridAlignment"
                         }
                     }
@@ -381,7 +381,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridDistribution": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridDistribution"
                         }
                     }
@@ -407,7 +407,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridMobileAlignment"
                         }
                     }

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

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

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

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

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

@@ -705,7 +705,7 @@ export class DuetHeader {
                         },
                         "I18nText": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::I18nText"
                         }
                     }
@@ -734,7 +734,7 @@ export class DuetHeader {
                     "references": {
                         "I18nText": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::I18nText"
                         }
                     }
@@ -1127,7 +1127,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1148,7 +1148,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1169,7 +1169,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1190,7 +1190,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1211,7 +1211,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1232,7 +1232,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1253,7 +1253,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1274,7 +1274,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1295,7 +1295,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1316,7 +1316,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1337,7 +1337,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderAnalyticsEvent"
                         }
                     }
@@ -1358,7 +1358,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderMobileNavToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderMobileNavToggleEvent"
                         }
                     }
@@ -1379,7 +1379,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }

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

@@ -58,7 +58,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: '0688ea9a9c1b36b5f8ca555051c1efa338bd1f57', class: {
+        return (h(TagName, { key: 'c921aaf37180daaa075fa9973069ff1ead3050a1', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -69,7 +69,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, this.preHeading && h("span", { key: 'ca9674066e83408743dda180faa73befac1f6ee2', class: "pre-post-heading" }, this.preHeading, " "), h("slot", { key: 'e2903a1c33bc8e3681523f2ab59ce83ad258bc87' }), this.postHeading && h("span", { key: '623bec656c67630d780b7922c922bf62da571dec', class: "pre-post-heading" }, " ", this.postHeading)));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, this.preHeading && h("span", { key: 'a39345b73db50edae14806161481c4f5ec2aea71', class: "pre-post-heading" }, this.preHeading, " "), h("slot", { key: 'f36300eafdc9fea4a9b8fde902cd1872bb586b65' }), this.postHeading && h("span", { key: 'e8f5b8d19838e6c3d8e049975dcc5740bfd00363', class: "pre-post-heading" }, " ", this.postHeading)));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -192,7 +192,7 @@ export class DuetHeading {
                     "references": {
                         "DuetHeadingWeight": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-heading/duet-heading.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-heading/duet-heading.tsx",
                             "id": "src/components/duet-heading/duet-heading.tsx::DuetHeadingWeight"
                         }
                     }

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

@@ -149,7 +149,17 @@
   height: 220px;
   margin: 0 auto;
 }
+.duet-hero.duet-hero-campaign .background picture, .duet-hero.duet-hero-section .background picture {
+  display: block;
+  height: 100%;
+}
+@media (min-width: 1440px) {
+  .duet-hero.duet-hero-campaign .background picture, .duet-hero.duet-hero-section .background picture {
+    height: auto;
+  }
+}
 .duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
+  display: block;
   height: 100%;
 }
 .duet-hero.duet-hero-campaign .background img.cover, .duet-hero.duet-hero-section .background img.cover {
@@ -607,11 +617,19 @@
   z-index: 1;
   width: 600px;
   height: 256px;
-  background-repeat: no-repeat;
-  background-position: 40px;
-  background-size: 100%;
   transform: rotate(-7deg) translate(-50%, 0);
 }
+.duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg picture {
+  display: block;
+}
+.duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg img {
+  position: absolute;
+  top: 50%;
+  left: 40px;
+  width: 100%;
+  height: auto;
+  transform: translateY(-50%);
+}
 @media (max-width: 35.9375em) {
   .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
     width: 520px;
@@ -1079,10 +1097,18 @@
   z-index: 1;
   width: 600px;
   height: 256px;
-  background-repeat: no-repeat;
-  background-size: 100%;
   transform: rotate(-7deg) translate(-50%, 0);
 }
+.duet-hero.duet-hero-content .background .brand-shaped-image .brand-shaped-image-bg picture {
+  display: block;
+}
+.duet-hero.duet-hero-content .background .brand-shaped-image .brand-shaped-image-bg img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+}
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content .background .brand-shaped-image .brand-shaped-image-bg {
     width: 733px;
@@ -1243,14 +1269,32 @@
 }
 
 .duet-hero:not(.duet-hero-with-image) .duet-hero-image {
+  position: relative;
   width: 100%;
   max-width: 400px;
   height: 0;
   padding-bottom: 50%;
   margin: 28px auto 0;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: contain;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image picture {
+  display: block;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: 50% 50%;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image img.cover {
+  object-fit: cover;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image img.center {
+  object-position: center;
 }
 @media (min-width: 36em) {
   .duet-hero:not(.duet-hero-with-image) .duet-hero-image {
@@ -1339,11 +1383,22 @@
   left: -5%;
   width: 110%;
   height: 110%;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: cover;
   transform: rotate(-10deg);
 }
+.duet-hero-image-wrapper .duet-hero-image picture {
+  display: block;
+}
+.duet-hero-image-wrapper .duet-hero-image img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
 
 .duet-hero-image-mask {
   position: relative;
@@ -1778,10 +1833,22 @@ duet-heading + duet-button {
   position: static;
   width: 100%;
   height: 100%;
-  background-position: 0;
-  background-size: cover;
   transform: none;
 }
+.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg picture,
+.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg picture {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg img,
+.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg img {
+  position: static;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 0 50%;
+}
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image,
   .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image {
@@ -1959,9 +2026,20 @@ duet-heading + duet-button {
   width: 100%;
   height: auto;
   aspect-ratio: 5/2;
-  background-size: cover;
   transform: none;
 }
+.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .brand-shaped-image .brand-shaped-image-bg picture {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .brand-shaped-image .brand-shaped-image-bg img {
+  position: static;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
 .duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
   border-radius: 12px;
   mask-image: none;