@duetds/components 9.7.3 → 9.8.1

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

@@ -1,20 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large, media_query_medium, media_query_small } from "@duetds/tokens/lib/tokens.json";
 import { Build, h, Host } from "@stencil/core";
-import { watchForElement, watchForOptions } from "../../utils/watch-options";
-function isGridItem(element) {
-    return element.tagName.toLowerCase() === "duet-grid-item";
-}
+import { debounce } from "../../utils/js-utils";
 export class DuetGrid {
     constructor() {
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_medium.replace(/'/g, "")),
-            window.matchMedia(media_query_small.replace(/'/g, "")),
-        ];
-        this.distributeFormElement = false;
         this.responsive = false;
         this.breakpoint = "small";
         this.direction = "horizontal";
@@ -38,52 +28,47 @@ export class DuetGrid {
             .map(side => parseInt(style[`margin-${side}`]))
             .reduce((total, side) => total + side, height);
     }
+    debounceWindowResizeHandler() {
+        debounce(this.updateGridItemsWithInputFields, 100);
+    }
     /**
      * Component lifecycle events.
      */
     async connectedCallback() {
-        const el = this.element;
-        this.distributeFormElement = this.alignment === "form_distribute";
-        this.mutationO = watchForOptions(el, "duet-grid-item", () => {
-            this.updateGridItems();
-        });
+        if (!Build.isServer) {
+            this.childObserver = new MutationObserver(this.updateGridItems.bind(this));
+            this.childObserver.observe(this.element, { childList: true });
+        }
         // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
-        if (this.distributeFormElement) {
-            this.mutation1 = watchForElement(el, "duet-input", () => {
-                this.updateGridItemsWithInputFields();
-            });
-            // listen for potential mediaquery changes and reset layout
-            for (let i = 0; i < this.mql.length; i++) {
-                // addEventListener is not available in Stencil hydrate
-                if (this.mql[i].addEventListener) {
-                    this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-                }
+        if (this.alignment === "form_distribute") {
+            if (!Build.isServer) {
+                this.formDistributeObserver = new MutationObserver(this.updateGridItemsWithInputFields.bind(this));
+                this.formDistributeObserver.observe(this.element, { subtree: true, childList: true, characterData: true });
+                window.addEventListener("resize", this.debounceWindowResizeHandler);
             }
+            this.updateGridItemsWithInputFields();
         }
         this.updateGridItems();
     }
     disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
-        if (this.mutation1) {
-            this.mutation1.disconnect();
-            this.mutation1 = undefined;
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
         }
-        // listen for potential mediaquery changes and reset layout
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-            }
+        if (this.formDistributeObserver) {
+            this.formDistributeObserver.disconnect();
+            this.formDistributeObserver = undefined;
         }
+        window.removeEventListener("resize", this.debounceWindowResizeHandler);
     }
     /**
      * Local methods
      */
+    getDirectChildren() {
+        return Array.from(Build.isServer ? this.element.children : this.element.querySelectorAll(":scope > *"));
+    }
     async updateGridItems() {
-        const items = Array.from(this.element.children).filter(isGridItem);
+        const items = this.getDirectChildren().filter(child => child.tagName.toLowerCase() === "duet-grid-item");
         items.forEach(item => {
             item.responsive = this.responsive;
             item.breakpoint = this.breakpoint;
@@ -92,7 +77,28 @@ export class DuetGrid {
         });
     }
     async updateGridItemsWithInputFields() {
-        const items = Array.from(this.element.children).filter(isGridItem);
+        // Duet components that need to taken into account in form_distribute
+        const elementNames = [
+            "duet-button",
+            "duet-checkbox",
+            "duet-choice",
+            "duet-choice-group",
+            "duet-combobox",
+            "duet-date-picker",
+            "duet-fieldset",
+            "duet-grid-item",
+            "duet-input",
+            "duet-multiselect",
+            "duet-number-input",
+            "duet-phone-input",
+            "duet-radio",
+            "duet-radio-group",
+            "duet-range-slider",
+            "duet-select",
+            "duet-textarea",
+            "duet-toggle",
+        ];
+        const items = this.getDirectChildren().filter(child => !!child.querySelector(elementNames.join(",")) || elementNames.includes(child.tagName.toLowerCase()));
         // if layout changes to columns instead of row, remove all padding
         const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
         let maxHeight = 0;
@@ -266,7 +272,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridAlignment": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridAlignment"
                         }
                     }
@@ -292,7 +298,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridDistribution": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridDistribution"
                         }
                     }
@@ -318,7 +324,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridMobileAlignment"
                         }
                     }
@@ -357,11 +363,6 @@ export class DuetGrid {
             }
         };
     }
-    static get states() {
-        return {
-            "distributeFormElement": {}
-        };
-    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

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

@@ -616,7 +616,7 @@ export class DuetHeader {
                         },
                         "I18nText": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::I18nText"
                         }
                     }
@@ -645,7 +645,7 @@ export class DuetHeader {
                     "references": {
                         "I18nText": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::I18nText"
                         }
                     }
@@ -1038,7 +1038,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1059,7 +1059,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1080,7 +1080,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1101,7 +1101,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1122,7 +1122,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1143,7 +1143,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1164,7 +1164,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1185,7 +1185,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1206,7 +1206,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1227,7 +1227,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1248,7 +1248,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderAnalyticsEvent"
                         }
                     }
@@ -1269,7 +1269,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderMobileNavToggleEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderMobileNavToggleEvent"
                         }
                     }
@@ -1290,7 +1290,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/kasimir/Documents/projects/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

@@ -167,7 +167,7 @@ export class DuetHeading {
                     "references": {
                         "DuetHeadingWeight": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-heading/duet-heading.tsx",
+                            "path": "/Users/kasimir/Documents/projects/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.js

@@ -375,7 +375,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroIconSize": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroIconSize"
                         }
                     }
@@ -617,7 +617,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroButtonData": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroButtonData"
                         }
                     }
@@ -740,7 +740,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroVariation": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroVariation"
                         }
                     }
@@ -860,7 +860,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroClickEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroClickEvent"
                         }
                     }
@@ -881,7 +881,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroAnalyticsEvent"
                         }
                     }

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

@@ -127,14 +127,41 @@ duet-caption:not(:last-of-type) {
   opacity: 0.75;
   transition: none;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-xx-small button {
+  top: -12px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-x-small button {
+  top: -16px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-small button {
+  top: -20px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single button {
   top: -48px;
   right: 0;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-xx-small button {
+  top: -36px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-x-small button {
+  top: -40px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-small button {
+  top: -44px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double button {
   top: -24px;
   right: 12px;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-xx-small button {
+  top: -12px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-x-small button {
+  top: -16px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-small button {
+  top: -20px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-button button {
   top: -24px;
   right: 0;

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

@@ -464,6 +464,7 @@ export class DuetInput {
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
+                [`input-padding-${this.inputPadding}`]: true,
             } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
                 : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed
@@ -964,7 +965,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
                         }
                     }
@@ -990,7 +991,7 @@ export class DuetInput {
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
                         }
                     }
@@ -1258,7 +1259,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
                         }
                     }
@@ -1475,7 +1476,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1496,7 +1497,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1517,7 +1518,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1538,7 +1539,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1559,7 +1560,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/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

@@ -105,7 +105,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
                         }
                     }
@@ -131,7 +131,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelSize": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/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

@@ -131,7 +131,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/leojappinen/Documents/Projects/Duet-Design-System/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/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

@@ -134,7 +134,8 @@ button {
   opacity: 1;
 }
 
-.block.duet-link {
+.block.duet-link,
+.block-center.duet-link {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 16px;
@@ -144,43 +145,64 @@ button {
   color: rgb(8, 42, 77);
   text-decoration: none;
 }
-.block.duet-link.duet-link-has-icon {
+.block.duet-link.duet-link-has-icon,
+.block-center.duet-link.duet-link-has-icon {
   grid-template-columns: auto 1fr auto;
 }
-.block.duet-link.none {
+.block.duet-link.none,
+.block-center.duet-link.none {
   padding: 0;
 }
-.block .block__icon {
+.block .block__icon,
+.block-center .block__icon {
   display: flex;
 }
-.block .block__icon duet-icon {
+.block .block__icon duet-icon,
+.block-center .block__icon duet-icon {
   width: 16px;
   height: 16px;
 }
-.block .block__icon duet-icon.icon-responsive {
+.block .block__icon duet-icon.icon-responsive,
+.block-center .block__icon duet-icon.icon-responsive {
   width: 30px;
   height: 30px;
 }
 @media (max-width: 22.5em) {
-  .block .block__icon duet-icon.icon-responsive {
+  .block .block__icon duet-icon.icon-responsive,
+  .block-center .block__icon duet-icon.icon-responsive {
     width: 24px;
     height: 24px;
   }
 }
-.block .block__content {
+.block .block__content,
+.block-center .block__content {
   position: relative;
   bottom: 2px;
 }
-.block .block__chevron {
+.block .block__chevron,
+.block-center .block__chevron {
   align-self: center;
 }
-.block .block__chevron-icon {
+.block .block__chevron-icon,
+.block-center .block__chevron-icon {
   transition: 300ms ease;
 }
-.block:not(.duet-link-is-external):hover .block__chevron-icon {
+.block:not(.duet-link-is-external):hover .block__chevron-icon,
+.block-center:not(.duet-link-is-external):hover .block__chevron-icon {
   transform: translateX(4px);
 }
 
+.block-center.duet-link {
+  align-items: center;
+}
+.block-center .block__content {
+  position: static;
+}
+.block-center .block__chevron {
+  display: flex;
+  align-items: center;
+}
+
 .duet-link.button:not(.duet-link-has-icon-background) .icon-wrap duet-icon {
   width: 20px;
   height: 20px;

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

@@ -107,6 +107,7 @@ export class DuetLink {
             case "default":
                 return this.renderDefaultContent();
             case "block":
+            case "block-center":
                 return this.renderBlockContent();
             case "button":
             case "card":
@@ -120,10 +121,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: 'bcde4f333a3bd278709dddda0e90ceae4c6a705d', class: {
+        return (h(Host, { key: '257fc0e157b43e4e1daaa1ec31f408436c28c733', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'ab2c62a98d88a54965ab7be9cc45907e6e07e5d7', href: this.url, class: {
+            } }, h(Tag, { key: 'fc0fe56a54a5ae2cfc59251d8c2c5f3e70fe9fb9', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -156,7 +157,7 @@ export class DuetLink {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLinkVariation",
-                    "resolved": "\"block\" | \"button\" | \"card\" | \"default\"",
+                    "resolved": "\"block\" | \"block-center\" | \"button\" | \"card\" | \"default\"",
                     "references": {
                         "DuetLinkVariation": {
                             "location": "import",