@duetds/components 10.3.1 → 10.5.0

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

@@ -10,9 +10,26 @@ export class DuetEmptyState {
          */
         this.theme = "";
         /**
-         * Icon shown in the empty state component.
+         * The variation of the empty state component. Use "warning" when the empty state is due to an error.
+         */
+        this.variation = "default";
+        /**
+         * Set background to "none" when no background is wanted, e.g. inside a table.
+         */
+        this.background = "auto";
+        /**
+         * Icon shown in the empty state component. For warning variation a status icon is always used.
+         * Use value "none" for no icon at all.
          */
         this.icon = "messaging-question";
+        /**
+         * Heading to show above the component content
+         */
+        this.heading = "";
+        /**
+         * Padding of the empty state component
+         */
+        this.padding = "medium";
         /**
          * The size of the empty state message.
          */
@@ -24,16 +41,25 @@ export class DuetEmptyState {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    getIcon() {
+        const size = this.size === "small" ? "large" : "x-large";
+        if (this.variation === "warning") {
+            return h("duet-status-icon", { variation: "warning", size: size, strong: true });
+        }
+        return h("duet-icon", { color: "currentColor", name: this.icon, size: size });
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9018087936c4abe5adead5d4fe62991ea84b3dc1' }, h("div", { key: 'a0aa84fb06673f4d741891019a98fd7d4f03b174', class: {
+        return (h(Host, { key: 'bf9aa87672aa22b4e89cc0014f6918fd8389981f' }, h("div", { key: '21e1d1af1326ef9709a99695809cb6025bd8431a', class: {
                 "duet-empty-state": true,
+                [this.variation]: true,
+                [`padding-${this.padding}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-                "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '8d9265fb0946a832c1c386b139b28b775ade9936', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '87abfa72d165e96e3ca1798ab0023e13d540d757' }, h("slot", { key: 'fc437b4821cbc146906f8c33aa06d4718a0584b2' })))));
+                "duet-no-background": this.background === "none",
+            } }, this.icon !== "none" && this.getIcon(), this.heading && (h("div", { key: 'dc994018199345c865ee6d242349dadd99f71b36' }, h("strong", { key: '4e758372f9785d9f54bfe969ddcb90a0ae1fee6d', class: "duet-empty-state-heading" }, this.heading), h("duet-spacer", { key: '7eedd7853ef4ea89bb434dc55a488132fa8a30ef', size: "x-small" }))), h("div", { key: '4d1817b68cd9e88627eb1725a06cd510ea10ed61' }, h("slot", { key: '4db106ff0912e6896ca74071580223340fb3df14' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -75,12 +101,58 @@ export class DuetEmptyState {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "variation": {
+                "type": "string",
+                "attribute": "variation",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetEmptyStateStatus",
+                    "resolved": "\"default\" | \"warning\"",
+                    "references": {
+                        "DuetEmptyStateStatus": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStateStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variation of the empty state component. Use \"warning\" when the empty state is due to an error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "background": {
+                "type": "string",
+                "attribute": "background",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"none\"",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set background to \"none\" when no background is wanted, e.g. inside a table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
             "icon": {
                 "type": "string",
                 "attribute": "icon",
                 "mutable": false,
                 "complexType": {
-                    "original": "DuetIconName",
+                    "original": "DuetIconName | \"none\"",
                     "resolved": "string",
                     "references": {
                         "DuetIconName": {
@@ -94,13 +166,59 @@ export class DuetEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon shown in the empty state component."
+                    "text": "Icon shown in the empty state component. For warning variation a status icon is always used.\nUse value \"none\" for no icon at all."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "\"messaging-question\""
             },
+            "heading": {
+                "type": "string",
+                "attribute": "heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading to show above the component content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetEmptyStatePadding",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "DuetEmptyStatePadding": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStatePadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding of the empty state component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
             "size": {
                 "type": "string",
                 "attribute": "size",

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

@@ -75,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '150ed749bb02f820ab14416d153e67cea52dc29e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '17055f020b42050cfc12e5954edaac9c6658788e', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'ac0f503ac6d41953e774ad46b418c8ea39ff4708', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b564273ca16fac8fbb500ab8bfc9dff72e579770', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '1cf7a2d88bbcea640fe06e19ce4b2d633be56c3b', id: this.labelId }, h(this.labelHeadingLevel, { key: 'aec7db3663b9cc1c1ac2205ab103c708c56a0573' }, this.label), this.caption && h("span", { key: '849cec9875e1713b0c53ee81ffdcb33b501a78b1' }, this.caption)), h("div", { key: '319c243237ed47fe584e7498514a3f392d9b8b19', class: {
+            } }, h("legend", { key: '607df92d8f78aaad01e4c80e33c17da55a52e20f', id: this.labelId }, h(this.labelHeadingLevel, { key: '33cee42411e380076885a046790cb8006088c5ed' }, this.label), this.caption && h("span", { key: '52c809bbe842c11a84e7d1a5c3083bfe92472d36' }, this.caption)), h("div", { key: 'aa297b27900d3a28a48bf8102b75e900896393ff', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'c69484583f6027412eb7d50a33af3db48a4b9755', class: "duet-fieldset-label" }, h("span", { key: 'b8df8f29e780738665c0a054399d1d1f97f5e7ea', "aria-hidden": "true" }, this.label), h("slot", { key: '18d94da36179d4ba5b78c3ed6ac83f41d401c067', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5ceb8c432f19ab8b18d04ce12f6463e563a7459a', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c6f433f3e47f2e2fdedcbc158d169ab6bea4a0a0', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'b8a61deb6211c5abbc806d2762088fcedb936873' }), h("span", { key: 'a6c68e7ef61365792b92fc6ef7290d3b3a3cdd65', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '4fea45e086a99437a8f7ddc0e1617a3a6046beed', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '3af22b271c143a074adee18554408291e3faa660', class: "duet-fieldset-label" }, h("span", { key: '939a883743e233ba83e8ff3328b18842b0c4eae4', "aria-hidden": "true" }, this.label), h("slot", { key: '822892f650b6c0f733cc58a1aee1654e21d1f1f6', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: 'bc40348b978fc775d1007cdf3949e95d4d3b54e0', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3119b1a7963015c24d6324d5de47fc53cdfd748e', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'fa922540a117205680098064372a70aefc0953ae' }), h("span", { key: 'ad8d4d59379d7a9f89e618754d46404eb5c3c664', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c36abae3849393120d72e3781305cb2ce88b384c', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '4990de1bf699e3f0daea24f507a9b9e252b11d9a' }, h("duet-visually-hidden", { key: '0a226f6f53a8da89230e81df8be61a2413c44af1', "aria-hidden": "true" }, h("input", { key: 'a8a8e3bfc73847a74ea8dc8dff0da0c16d510e15', ref: input => {
+        return (h(Host, { key: 'f17176210e5f0675eb847b4d9d60594a226e3dab' }, h("duet-visually-hidden", { key: '3a0eef27ad35e9348f9047f8ad2dcf13c5a9ad76', "aria-hidden": "true" }, h("input", { key: '4c67d86c2f388fbd4e2914013b0611e973a24e35', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

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

@@ -160,16 +160,16 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: 'cded4930f82ba556fe630d4295e351cbbb2082e2', 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: '937096c43e34404c84fa15418efd41c5692f6ac1', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '865c6932f382aba543ca23c1bd4ab5aab4885b0a', 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: '5a4e9f746ddacca61409f6d398474e142ddffe81', class: "footer-top-logo" }, h("duet-logo", { key: '9a80fbca3c693fdc4a659b4644b0de9ed23c6773', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'ca9651a3a6c65b51931f237bc81d6f95fe779134', class: "footer-top-right-container" }, h("slot", { key: '7c84d38abbbc5618d311e8ef263a4a1aef8ae2b7', name: "info" }), h("div", { key: '488bde039351fbbf7618daaaa071b3420662e317', 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: '33805ebcfc7766486807318270595db1deedbb24', name: "extra" }), h("p", { key: '90ac218478d2659b7f74bb370d8066fd7ef7cf1c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '957a273602b782e88c3e4bd9ae639a68cfd8b966', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'd96e17ca5743ed26b331ecd377b6210dcf3e5a2a', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'b1495de197bbd8ab5a4ca4c0feddf656e4bfc0b3' }, 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: '8be41d3d9944acb6903a6f3caff06d6f8f9cd5cc', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }, part: "top" }, h("div", { key: '8d7fa0e35487812a06867478b0d8c717e8cbc295', class: "footer-top-logo" }, h("duet-logo", { key: '88a405f43f8923aec01dfbe7637d8b693c24ee94', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '0945fb2a21d2621abd034763e50d30f047fa7734', class: "footer-top-right-container" }, h("slot", { key: '73eb607d6eae88968f7066c951f5f8ddf326f55e', name: "info" }), h("div", { key: '1c142d6053b4b3f9b0bae03289e9ad79849cade6', class: "footer-top-items" }, this.processedItems &&
+            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '86fc7e14e4fb80b35c4e81659c9e3b35d6c965c7', name: "extra" }), h("p", { key: 'f5ddbb6a4cbf19f70259d96ef786cd6b068f503f', class: "duet-footer-menu", part: "menu" }, h("span", { key: '9e2390e03d199fc50f6fb67181734a4ba71a38b8', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'c7b6bc951c3d2dc81abfcc4eac43d6d9061e9421', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '87ef405d79957865d7cfd81f07fb400b9aa2ab1a' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '53c2ae3a42969730299aa948b8b6d42e9d765d32', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -389,6 +389,29 @@
   }
 }
 
+:host(.duet-grid-variation-grid.duet-grid-no-row-gap) {
+  row-gap: 0;
+}
+
+:host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+  column-gap: 0;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(8, 83px);
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(12, 91.6666666667px);
+  }
+}
+
 :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
   grid-column: 1/span 4;
 }

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

@@ -44,6 +44,11 @@ export class DuetGrid {
          * CSS grid based templates that can be used to create pre-defined layouts.
          */
         this.gridTemplate = null;
+        /**
+         * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first
+         * is row-gap and the second column-gap. Does not apply to button-grid.
+         */
+        this.gridTemplateGap = "auto";
     }
     validateAlignment() {
         if (this.alignment === "form_distribute") {
@@ -203,7 +208,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ad66e7c93a876e1c16fcd3e463dfbac854f9572b', class: {
+        return (h(Host, { key: 'e64260236eda4217a2cb10444342c33d243da8cf', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -230,7 +235,9 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: 'cb6c2453668b0a2ea8b90eb003a61f78585576a0' })));
+                "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: '1cb11ce3685bf5043dfa3e36e6a0ff3653106b54' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -435,6 +442,26 @@ export class DuetGrid {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "gridTemplateGap": {
+                "type": "string",
+                "attribute": "grid-template-gap",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"none\" | \"auto none\" | \"none auto\"",
+                    "resolved": "\"auto none\" | \"auto\" | \"none auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first\nis row-gap and the second column-gap. Does not apply to button-grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
             }
         };
     }

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: '895153cc6a7fb2d33ea0fe30db592dc41dfe666e', style: {
+        return (h(Host, { key: '59b2546565c78716d981db97ba3a66b9f4b06104', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: 'e15b327861008131c15c1b804aecd2c0351afdf1' })));
+            } }, h("slot", { key: '78c0ca977366f49a62d91c19e42b7140455c0e7e' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,6 +61,11 @@
   -webkit-hyphens: auto;
   hyphens: auto;
 }
+.duet-heading .pre-post-heading {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
 .duet-heading.h0 {
   font-size: 9.4vw;
   line-height: 1.1;
@@ -85,10 +90,29 @@
   .duet-heading.h0 {
     font-size: 2.25rem;
   }
+  .duet-heading.h0 .pre-post-heading {
+    font-size: 1rem;
+  }
 }
 .duet-heading.h0.fixed-size {
   font-size: 4.5rem;
 }
+.duet-heading.h0.fixed-size .pre-post-heading {
+  font-size: 1.5rem;
+}
+.duet-heading.h0 .pre-post-heading {
+  font-size: 4.2vw;
+}
+@media (max-width: 29.7619047619rem) {
+  .duet-heading.h0 .pre-post-heading {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 35.7142857143rem) {
+  .duet-heading.h0 .pre-post-heading {
+    font-size: 1.5rem;
+  }
+}
 .duet-heading.h1 {
   font-size: 7vw;
   line-height: 1.1;
@@ -113,10 +137,29 @@
   .duet-heading.h1 {
     font-size: 1.5rem;
   }
+  .duet-heading.h1 .pre-post-heading {
+    font-size: 0.875rem;
+  }
 }
 .duet-heading.h1.fixed-size {
   font-size: 3rem;
 }
+.duet-heading.h1.fixed-size .pre-post-heading {
+  font-size: 1.25rem;
+}
+.duet-heading.h1 .pre-post-heading {
+  font-size: 4vw;
+}
+@media (max-width: 25rem) {
+  .duet-heading.h1 .pre-post-heading {
+    font-size: 1rem;
+  }
+}
+@media (min-width: 31.25rem) {
+  .duet-heading.h1 .pre-post-heading {
+    font-size: 1.25rem;
+  }
+}
 .duet-heading.h2 {
   font-size: 5.8vw;
   line-height: 1.1;
@@ -144,10 +187,29 @@
   .duet-heading.h2 {
     font-size: 1.375rem;
   }
+  .duet-heading.h2 .pre-post-heading {
+    font-size: 0.875rem;
+  }
 }
 .duet-heading.h2.fixed-size {
   font-size: 2.25rem;
 }
+.duet-heading.h2.fixed-size .pre-post-heading {
+  font-size: 1rem;
+}
+.duet-heading.h2 .pre-post-heading {
+  font-size: 3.8vw;
+}
+@media (max-width: 23.0263157895rem) {
+  .duet-heading.h2 .pre-post-heading {
+    font-size: 0.875rem;
+  }
+}
+@media (min-width: 26.3157894737rem) {
+  .duet-heading.h2 .pre-post-heading {
+    font-size: 1rem;
+  }
+}
 .duet-heading.h3 {
   margin-bottom: 12px !important;
   font-size: 4.2vw;

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: '2f89171baca460e8b0b6b807a992856426a83838', 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" }, h("slot", { key: 'aded9e6a879359f85d77f436736131a26188f4dc' })));
+            }, "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"; }
@@ -318,6 +318,44 @@ export class DuetHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "preHeading": {
+                "type": "string",
+                "attribute": "pre-heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is included inside the heading tag, but is rendered as smaller line above the slotted heading text.\nUse only with pages' main heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "postHeading": {
+                "type": "string",
+                "attribute": "post-heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is included inside the heading tag, but is rendered as smaller line below the slotted heading text.\nUse only with pages' main heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

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

@@ -284,7 +284,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'd5eeb3fa2ded961e10b0db110bc1606beadb5878', role: "region", class: {
+        return (h("div", { key: 'c9ddbcc16c2911a20e497cd8aa384fa5c07d33aa', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -302,17 +302,17 @@ export class DuetHero {
                 "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
                 "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'f1567b419987fa37b1bf3219d073b7407d68969a', class: "background-area" }, h("div", { key: '240fb437298bb4dbbe401c66c4b7ba4be218b793', class: "background-container" }, h("div", { key: '9bd3e01a06940f60f6edebe1b360afcfc6364c65', class: "background" }, h("img", { key: 'ece8321c4bd15e3eb89a58914373699cd5f74a6d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: '2cbf71fbd70243c9e73dbf0be5cdcd74a4a6ae80', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'a92855b91f7460fe11771919b98613f2bc844c02', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '8eab8720aee4d33edb1ffc3e189ade31115cff0a', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '6a3b020ed0e975c55a1ef0a098900269282e0993', class: { background: true, [this.layout]: true } }, h("div", { key: '724ed47abbe45d42cdc24a15cf144ec92ebe7295', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'e34148e2264c68a7acce4cdd7ecd98b392f375f3', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '995d6c69d45d9b84e98afd7fbe143dd22c91ae93', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'f1adcd5407f731f243e920fd6d02e6307770c3b6', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'cbbd91e50a57b03cc9f1b2f8da143a73a5c9c23a', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '25750e275462cd216688306a684396609b4db5da', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '080dc04b7915092298dbfd71d85070db370553d2', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'f56fbc69d93eb69daf1a85bf4990d32babc011fd', class: "background-area" }, h("div", { key: '2e81ad46ab2d99734b33b3a5b275124199be6174', class: "background" }, h("div", { key: '67136b598ac80dabcefa7ece68e7152a444f6813', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '522590966eb8f2a919fbef1bd296d14cb7e47056', class: "brand-shape" }), h("div", { key: '64942939ee3b0cb08dbb8f9d3a0c50e3d6492fed', class: "brand-shaped-image" }, h("div", { key: '2a1c9671ff623f747a76ca2bf7eb7061f3e0ab77', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'c393815b6c10d63c768ac4af722df40ab1d611a8', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: 'fcf490f61e4a2c2fb88ce5804d7059d68789a5ad', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '026cece4736fb17a4f0809cc085ff131296eedcf', class: "duet-hero-image-mask" }, h("div", { key: 'd353ae243b8e1787ce2904cb50a8cb0f82f2b814', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '0f6bf9a85808413d9e9177bb4d6f4bdec1ebb372', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '882584ea7a07b3f5920a7ab308e42e5ac8d90956', class: "duet-hero-back" }, h("duet-button", { key: 'a0bb7347fc443bc2f4dbaa8a4359304c61a4a33d', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'a11039ca72275168553d2bba06cd909229dc1925', class: "background-area" }, h("div", { key: 'a21ad76654ac39c2fa21795f1cca235dc92e6404', class: "background-container" }, h("div", { key: '12d3583034b68b6fb747c749c0449146c40cb471', class: "background" }, h("img", { key: '8961eadf230127f3783efad4c48be759c4657e2a', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'bdfeab66795ec39e3f0383d9c2ef713733eb1a87', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'f08f6d3f621e7dac9a46f1942d87a6ec8cc8afa1', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'dcb0f245be411d836d24d7adb5c98b82841d6038', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'a5c5eccc8dcf20d10c7be435873c815eaf0713e2', class: { background: true, [this.layout]: true } }, h("div", { key: '358763fb7ceea2e54bb6d5249a3b4281de220758', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'a11b4ea782b4e6887ec4d6573188adeec90577b1', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '7afb89a0beb1d7675c33fcc831880c8126f1299a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'd9f4649e3eb88d062cbde9eb311f195357f67d5d', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'e75eeac505d3b021f0a7de2c195b9846b77c7c17', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '3c7d8d8ef1ccb2a63c0cde7ce064adb3ac49ba9a', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '23ff81f55a6f02a5fee73f17ea54a96cee164b85', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'd1d02c374a68c1b68fb2f9d848e5a7c357b5a220', class: "background-area" }, h("div", { key: '9f53455c7fca9008387d26b0dfc89c104076c248', class: "background" }, h("div", { key: '80d50fdf1c366ac730e88fff3d59f10f725f66bb', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'b079b624311717908bb1e1c37a0c56ad560ed44e', class: "brand-shape" }), h("div", { key: '247c5196610c63556bf2f66e2d8334d9cce8bdfa', class: "brand-shaped-image" }, h("div", { key: 'a83da29f05f36125276f4e74096648b30a8e9898', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: '150f6775a489981cbeaa8aa03f188f165d48aee0', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '558787b0fd8e59329b907d7dda223526d14b632d', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '12abfe5fb1240e186528ecbc2119c0797480e77f', class: "duet-hero-image-mask" }, h("div", { key: '0592878e99fd51f01ce16c2bf2ac1ae44c4636a1', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: 'd7a6838d0f589bb56ea831375e8a6237fe3c4bf2', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: 'dbef4d7459000d59a63deb5834086f5e607f8a0a', class: "duet-hero-back" }, h("duet-button", { key: '19481b475ec5fa1a83ee3d94d6170e823d80e5ae', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'd64fe12b0d99a21a97c3c01bf8a27c3d90168b06', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '6f59e43937274d798205e53bb5c8097707c84c7d', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '6e3a9999d6d9cfb00836f50d1f026f572c13d4d9', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '5a246252a9a3cffd670e27c7b34d62dbe81d99d1', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '9deaac254f1793d9cac59610b27e90cd67a1203a', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'f938dd95a754fa9749699793ce5a81a313cc94a8', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '719bb29e202df58c0cd542c6b2c72a8ced1157ea', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '36849331db1a89058aa564e686a46a9b7e975e1b', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '553b3b961f3f23fdab788b84e63552d3c0686b37', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: 'af02b833ecfd90cfd09f0c48c071c41e935080db', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '77cb919644b1a87eeff3ec753e4b075b3adb6e27' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'f5eed6109f77a64ee2ab2bafcc38c664a4bca2f9', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'f1afc26bae892d9ae01824cae17226859bcb2156', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '8ce3263c60dc312e31098663adadec75d34c9e0e', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'a9faf36bb7d72156356b527ef585f4db2f07885f', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '10e35d0acadfbe28c7c3c9a5725190c00cc35214', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'd289ee15b7e8ae4e821195252e132ba6dfd4bb13', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '66f747db21ef3d390d01c78ff7b05879a4d435c5', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'a61351c8a3463e0d7b3881d4ed2eb430a4d708f8', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '5e17ebff3513457595a670b8b180ad4c900bb5ac', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '7cb299e23a2062bdf5a7831891b9a3590ad51ad5', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '132f4b0f22736d84217d2ef92fb137bb37ae1bfa', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: 'ba4d8449b00fe95aa8e9e2b4c0f43143e851c44f' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'da7c7c2652fe88ee7a097e696e56c301d8d813b9', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", Object.assign({ key: '4dbed5f231c2ffff11d5336b9ada8da3fefbdfce', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '3d48509557f9575a15947b37ab4fc30b768b5dbb', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: 'b02c3a2b4e9722c7fc64b62e708c2d69d668b5a7', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'a8869163ed1e35a8987e126305221199705f4a88', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,11 +144,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '2f6837b926530cee2afc83a590aa1ccb0dfeca03', class: {
+        return (h(Host, { key: 'f6a74ccabd59055d22eec3654bde9c81fd4a9ce3', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '6fa86044b5f3966537f38590bd12b28b698a080b', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: 'f2ea10e9ec8459d5a5995781e193c6d8df7fb1ef', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '4ba33bca7da0ccbc0f11b1b5693e7912d0a0d45d', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '3d93b31d1831fa77b71a5f574a38d838636c7757', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }