@duetds/components 8.6.2 → 8.6.3

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

@@ -778,7 +778,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
                         }
                     }
@@ -802,7 +802,7 @@ export class DuetInput {
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
                         }
                     }
@@ -1044,7 +1044,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
                         }
                     }
@@ -1223,7 +1223,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1244,7 +1244,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1265,7 +1265,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1286,7 +1286,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1307,7 +1307,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }

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

@@ -101,7 +101,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
                         }
                     }
@@ -125,7 +125,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelSize": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
                         }
                     }

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

@@ -124,7 +124,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-layout/duet-layout.tsx",
                             "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
                         }
                     }

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

@@ -173,8 +173,8 @@ button {
   align-items: center;
   width: 100%;
   min-height: 48px;
-  padding: 12px;
-  padding-right: 20px;
+  padding: 14px 16px;
+  line-height: 1.25;
   text-decoration: none;
   background-color: rgb(255, 255, 255);
   border: solid 1px rgb(207, 210, 212);
@@ -201,6 +201,9 @@ button {
 }
 .duet-link.button.duet-link-has-icon-background {
   min-height: 60px;
+  padding: 12px;
+  padding-right: 20px;
+  line-height: 1.5;
 }
 .duet-link.button.duet-link-has-icon-background .icon-wrap {
   width: 36px;
@@ -213,19 +216,19 @@ button {
 }
 @media (min-width: 48em) {
   .duet-link.button {
-    gap: 16px;
-    min-height: 60px;
-    border-radius: 16px;
+    min-height: 50px;
   }
   .duet-link.button.duet-link-has-icon-background {
+    gap: 16px;
     min-height: 72px;
+    border-radius: 16px;
   }
   .duet-link.button.duet-link-has-icon-background .icon-wrap {
     width: 48px;
     height: 48px;
     border-radius: 12px;
   }
-  .duet-link.button .duet-link-content {
+  .duet-link.button.duet-link-has-icon-background .duet-link-content {
     font-size: 1.1rem;
   }
 }
@@ -239,6 +242,9 @@ button {
   border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
 }
+.duet-link.button .block__chevron-icon {
+  transition: 300ms ease;
+}
 .duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon {
   transform: translateX(4px);
 }

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

@@ -125,7 +125,7 @@ export class DuetLink {
         const iconWrapStyle = {
             "background-color": getColorByName(this.iconBackground, this.theme),
         };
-        return (h(Fragment, null, h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: this.isMediumScreen ? "small" : "medium", name: this.icon, margin: "none", color: this.iconColor })), h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" })));
+        return (h(Fragment, null, h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: !this.iconBackground || this.isMediumScreen ? "small" : "medium", name: this.icon, margin: "none", color: this.iconColor })), h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" })));
     }
     renderContent() {
         switch (this.variation) {

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

@@ -169,7 +169,7 @@ export class DuetList {
                     "references": {
                         "DuetListMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListMobileAlignment"
                         }
                     }
@@ -217,7 +217,7 @@ export class DuetList {
                     "references": {
                         "DuetListVariation": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListVariation"
                         }
                     }
@@ -241,7 +241,7 @@ export class DuetList {
                     "references": {
                         "DuetListLabelWidth": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListLabelWidth"
                         }
                     }

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

@@ -176,7 +176,7 @@ export class DuetLogo {
                     "references": {
                         "DuetLogoSize": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-logo/duet-logo.tsx",
                             "id": "src/components/duet-logo/duet-logo.tsx::DuetLogoSize"
                         }
                     }

package/lib/collection/components/duet-menu-bar/duet-menu-bar.js

@@ -251,7 +251,7 @@ export class DuetMenuBar {
                     "references": {
                         "DuetMenuBarChangeEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
                             "id": "src/components/duet-menu-bar/duet-menu-bar.tsx::DuetMenuBarChangeEvent"
                         }
                     }

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

@@ -186,6 +186,7 @@
 .duet-modal.slide-up {
   top: 100vh;
   margin: 0;
+  overflow: auto;
   border-radius: 4px 4px 0 0;
   opacity: 1;
   transition: top 600ms ease;
@@ -282,7 +283,7 @@
 .duet-modal-sticky-header {
   position: sticky;
   top: 0;
-  z-index: 200;
+  z-index: 300;
   display: block;
   padding-bottom: 12px;
   text-align: left;

package/lib/collection/components/duet-modal/duet-modal.e2e.js

@@ -59,6 +59,27 @@ describe("duet-modal", () => {
         const element = await page.find("duet-modal >>> .duet-modal-container");
         expect(element).toHaveClass("duet-modal-active");
     });
+    it("should provide a method to scroll content to top", async () => {
+        const loremIpsumArray = new Array(20).fill("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.");
+        const page = await createPage(`
+      <duet-modal variation="slide-up" active>
+        <div slot="sticky-header"><duet-heading level="h3">Etsi lorem ipsum</duet-heading></div>
+        <duet-button class="top">Top</duet-button>
+        ${loremIpsumArray.map(i => `<duet-paragarph>${i}</duet-paragraph>`)}
+        <duet-button class="bottom">Bottom</duet-button>
+      </duet-modal>`);
+        const modal = await page.find("duet-modal");
+        const top = await page.find("duet-button.top");
+        const bottom = await page.find("duet-button.bottom");
+        expect(await top.isIntersectingViewport()).toBeTruthy();
+        expect(await bottom.isIntersectingViewport()).toBeFalsy();
+        bottom.click();
+        expect(await top.isIntersectingViewport()).toBeFalsy();
+        expect(await bottom.isIntersectingViewport()).toBeTruthy();
+        await modal.callMethod("scrollToTop", false); // call with false for immediate scroll
+        expect(await top.isIntersectingViewport()).toBeTruthy();
+        expect(await bottom.isIntersectingViewport()).toBeFalsy();
+    });
     it.skip("closes on blur", async () => {
         const page = await createPage(`
       <duet-modal

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

@@ -183,12 +183,33 @@ export class DuetModal {
     async hide() {
         this.open = false;
     }
+    /**
+     * Scolls the top of the modal's content into view
+     *
+     * @param smooth Set to false for instant scrolling
+     */
+    async scrollToTop(smooth = true) {
+        var _a;
+        const behavior = smooth ? "smooth" : "auto";
+        if (this.variation === "slide-up") {
+            const stickyHeaderHeight = ((_a = this.modalEl.querySelector(".duet-modal-sticky-header")) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+            const modalBodyPadding = this.modalEl
+                .querySelector(".duet-modal-body")
+                .computedStyleMap()
+                .get("padding-top");
+            this.slotContainerEl.style.scrollMarginTop = `${stickyHeaderHeight + modalBodyPadding.value}px`;
+            this.slotContainerEl.scrollIntoView({ behavior });
+        }
+        else {
+            this.modalEl.querySelector(".duet-modal-body").scrollIntoView({ behavior });
+        }
+    }
     /**
      * Adds a message to the modal dialog using animation and annoucing it to screen readers.
      * Primarily for use with the loader variation.
      *
-     * @param message - The message to be added to the modal dialog.
-     * @param visible - set to false if you want to add a non-visual message.
+     * @param message The message to be added to the modal dialog.
+     * @param visible Set to false if you want to add a non-visual message.
      */
     async addMessage(message, visible = true) {
         const el = document.createElement(visible ? "duet-paragraph" : "duet-visually-hidden");
@@ -355,7 +376,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -466,7 +487,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalVariation": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalVariation"
                         }
                     }
@@ -490,7 +511,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -732,7 +753,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalCloseEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
                         }
                     }
@@ -775,17 +796,45 @@ export class DuetModal {
                     "tags": []
                 }
             },
+            "scrollToTop": {
+                "complexType": {
+                    "signature": "(smooth?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "smooth",
+                            "type": "boolean",
+                            "docs": "Set to false for instant scrolling"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CSSUnitValue": {
+                            "location": "global",
+                            "id": "global::CSSUnitValue"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scolls the top of the modal's content into view",
+                    "tags": [{
+                            "name": "param",
+                            "text": "smooth Set to false for instant scrolling"
+                        }]
+                }
+            },
             "addMessage": {
                 "complexType": {
                     "signature": "(message: string, visible?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "message",
                             "type": "string",
-                            "docs": "- The message to be added to the modal dialog."
+                            "docs": "The message to be added to the modal dialog."
                         }, {
                             "name": "visible",
                             "type": "boolean",
-                            "docs": "- set to false if you want to add a non-visual message."
+                            "docs": "Set to false if you want to add a non-visual message."
                         }],
                     "references": {
                         "Promise": {
@@ -799,10 +848,10 @@ export class DuetModal {
                     "text": "Adds a message to the modal dialog using animation and annoucing it to screen readers.\nPrimarily for use with the loader variation.",
                     "tags": [{
                             "name": "param",
-                            "text": "message - The message to be added to the modal dialog."
+                            "text": "message The message to be added to the modal dialog."
                         }, {
                             "name": "param",
-                            "text": "visible - set to false if you want to add a non-visual message."
+                            "text": "visible Set to false if you want to add a non-visual message."
                         }]
                 }
             }

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

@@ -318,7 +318,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         }
                     }
@@ -453,7 +453,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         }
                     }
@@ -629,7 +629,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -650,7 +650,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -671,7 +671,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -285,7 +285,7 @@ export class DuetNotificationDrawer {
                     "references": {
                         "DuetNotificationDrawerDirection": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
                             "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
                         }
                     }

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -1032,7 +1032,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1053,7 +1053,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1074,7 +1074,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1095,7 +1095,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }

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

@@ -150,7 +150,7 @@ export class DuetOverlay {
                     "references": {
                         "OverlayDisplayDevice": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-overlay/duet-overlay.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-overlay/duet-overlay.tsx",
                             "id": "src/components/duet-overlay/duet-overlay.tsx::OverlayDisplayDevice"
                         }
                     }

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

@@ -80,6 +80,9 @@
     padding: 72px 150px 40px 0;
   }
 }
+.duet-page-heading:not(.has-icon) .heading {
+  padding-right: 0;
+}
 .duet-page-heading .background {
   position: absolute;
   top: 0;

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

@@ -26,6 +26,7 @@ export class DuetPageHeading {
         return (h("div", { class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
+                "has-icon": !!this.icon,
                 [this.layout]: true,
             } }, h("div", { class: "background" }, this.theme === "turva" && h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), this.theme !== "turva" && h("div", { class: "brand-shape second-shape" }), this.icon && (h("div", { class: "brand-shaped-icon" }, h("duet-icon", { background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { class: "heading" }, h("slot", { name: "heading" }))));
     }