@duetds/components 6.7.1 → 6.8.1

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

@@ -50,6 +50,7 @@ export class DuetCombobox {
     this.formatter = (item) => item && item.name ? item.name : "";
     this.value = undefined;
     this.minCharacters = 1;
+    this.openListOnClick = false;
   }
   activeItemHandler(state) {
     this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
@@ -84,7 +85,12 @@ export class DuetCombobox {
     this.input = this.element.querySelector("duet-input");
     this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
     this.input.addEventListener("click", () => {
-      this.inputValue.length >= this.minCharacters ? (this.listOpen = true) : (this.listOpen = false);
+      if (!this.openListOnClick) {
+        this.inputValue.length >= this.minCharacters ? (this.listOpen = true) : (this.listOpen = false);
+      }
+      else {
+        this.listOpen = !this.listOpen;
+      }
     });
     this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
     //add correct aria attributes to the input element
@@ -513,6 +519,24 @@ export class DuetCombobox {
         "attribute": "min-characters",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "openListOnClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines if items list should always open after clicking on input"
+        },
+        "attribute": "open-list-on-click",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -43,10 +43,12 @@ export class DuetContactCard {
    * Always the last one in the class.
    */
   render() {
+    const isTurva = this.theme === "turva";
+    const theme = isTurva ? "turva" : "default";
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
         "duet-contact-card": true,
         "duet-theme-turva": this.theme === "turva",
-      }, "aria-role": "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", null, this.name && (h("duet-heading", { class: "name", level: "h3", margin: "none" }, this.name)), this.description && (h("duet-paragraph", { class: "description", margin: "none" }, this.description)), this.email && (h("div", { class: "email" }, h("duet-icon", { name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none" }), h("duet-link", { url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}` }, this.email))), this.phone && (h("div", { class: "phone" }, h("duet-icon", { name: "form-tel", size: "x-small", color: "primary-dark", margin: "none" }), h("duet-link", { url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}` }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { class: "call-to-action" }, h("duet-button", { variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl }, this.buttonText))), h("div", null), h("slot", null))));
+      }, "aria-role": "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", null, this.name && (h("duet-heading", { class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { class: "email" }, h("duet-icon", { name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { class: "phone" }, h("duet-icon", { name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { class: "call-to-action" }, h("duet-button", { variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", null), h("slot", null))));
   }
   static get is() { return "duet-contact-card"; }
   static get encapsulation() { return "shadow"; }

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

@@ -16,6 +16,15 @@
   height: auto;
 }
 
+:host(.duet-grid-breakpoint-x-small) {
+  flex-direction: row !important;
+}
+@media (max-width: 22.5em) {
+  :host(.duet-grid-breakpoint-x-small) {
+    flex-direction: column !important;
+  }
+}
+
 @media (min-width: 36em) {
   :host(.duet-grid-breakpoint-small) {
     flex-direction: row !important;
@@ -28,6 +37,12 @@
   }
 }
 
+@media (min-width: 62em) {
+  :host(.duet-grid-breakpoint-large) {
+    flex-direction: row !important;
+  }
+}
+
 @media (min-width: 64.0625em) {
   :host(.duet-grid-breakpoint-x-large) {
     flex-direction: row !important;
@@ -42,6 +57,15 @@
   flex-direction: row !important;
 }
 
+:host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
+  flex-direction: column !important;
+}
+@media (max-width: 35.9375em) {
+  :host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
+    flex-direction: column !important;
+  }
+}
+
 :host(.duet-grid-direction-vertical.duet-grid-breakpoint-small) {
   flex-direction: column !important;
 }
@@ -60,6 +84,15 @@
   }
 }
 
+:host(.duet-grid-direction-vertical.duet-grid-breakpoint-large) {
+  flex-direction: column !important;
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-direction-vertical.duet-grid-breakpoint-large) {
+    flex-direction: column !important;
+  }
+}
+
 :host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {
   flex-direction: column !important;
 }
@@ -89,6 +122,26 @@
   align-items: baseline !important;
 }
 
+:host(.duet-grid-align-top.duet-grid-breakpoint-x-small) {
+  align-items: flex-start !important;
+}
+
+:host(.duet-grid-align-bottom.duet-grid-breakpoint-x-small) {
+  align-items: flex-end !important;
+}
+
+:host(.duet-grid-align-center.duet-grid-breakpoint-x-small) {
+  align-items: center !important;
+}
+
+:host(.duet-grid-align-stretch.duet-grid-breakpoint-x-small) {
+  align-items: stretch !important;
+}
+
+:host(.duet-grid-align-baseline.duet-grid-breakpoint-x-small) {
+  align-items: baseline !important;
+}
+
 @media (min-width: 36em) {
   :host(.duet-grid-align-top.duet-grid-breakpoint-small) {
     align-items: flex-start !important;
@@ -149,6 +202,36 @@
   }
 }
 
+@media (min-width: 62em) {
+  :host(.duet-grid-align-top.duet-grid-breakpoint-large) {
+    align-items: flex-start !important;
+  }
+}
+
+@media (min-width: 62em) {
+  :host(.duet-grid-align-bottom.duet-grid-breakpoint-large) {
+    align-items: flex-end !important;
+  }
+}
+
+@media (min-width: 62em) {
+  :host(.duet-grid-align-center.duet-grid-breakpoint-large) {
+    align-items: center !important;
+  }
+}
+
+@media (min-width: 62em) {
+  :host(.duet-grid-align-stretch.duet-grid-breakpoint-large) {
+    align-items: stretch !important;
+  }
+}
+
+@media (min-width: 62em) {
+  :host(.duet-grid-align-baseline.duet-grid-breakpoint-large) {
+    align-items: baseline !important;
+  }
+}
+
 @media (min-width: 64.0625em) {
   :host(.duet-grid-align-top.duet-grid-breakpoint-x-large) {
     align-items: flex-start !important;

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

@@ -134,8 +134,10 @@ export class DuetGrid {
         "duet-grid-mobile-right": this.mobile === "right",
         "duet-grid-direction-horizontal": this.direction === "horizontal",
         "duet-grid-direction-vertical": this.direction === "vertical",
+        "duet-grid-breakpoint-x-small": this.breakpoint === "x-small",
         "duet-grid-breakpoint-small": this.breakpoint === "small",
         "duet-grid-breakpoint-medium": this.breakpoint === "medium",
+        "duet-grid-breakpoint-large": this.breakpoint === "large",
         "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
       } }));
   }
@@ -176,7 +178,7 @@ export class DuetGrid {
         "mutable": false,
         "complexType": {
           "original": "DuetGridBreakpoint",
-          "resolved": "\"medium\" | \"small\" | \"x-large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {
             "DuetGridBreakpoint": {
               "location": "import",

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

@@ -175,7 +175,7 @@ export class DuetGridItem {
         "mutable": false,
         "complexType": {
           "original": "DuetGridBreakpoint",
-          "resolved": "\"medium\" | \"small\" | \"x-large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {
             "DuetGridBreakpoint": {
               "location": "import",

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

@@ -62,6 +62,7 @@
 }
 .duet-heading.h0 {
   font-size: 9.4vw;
+  line-height: 1.1;
 }
 .duet-heading.h0.duet-p-0 {
   padding: 0 !important;
@@ -86,6 +87,7 @@
 }
 .duet-heading.h1 {
   font-size: 7vw;
+  line-height: 1.1;
 }
 .duet-heading.h1.duet-p-0 {
   padding: 0 !important;
@@ -110,6 +112,7 @@
 }
 .duet-heading.h2 {
   font-size: 5.8vw;
+  line-height: 1.1;
 }
 .duet-heading.h2.duet-p-0 {
   padding: 0 !important;

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

@@ -120,8 +120,8 @@
   }
 }
 .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
-  padding: 0;
-  margin: 0 0 48px;
+  padding: 0 0 48px;
+  margin: 0;
   overflow: hidden;
   background: none;
 }
@@ -204,11 +204,11 @@
 }
 .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
   position: absolute;
-  top: 153px;
+  top: 143px;
   right: 0;
-  left: -100px;
-  width: 712.18px;
-  height: 712.18px;
+  left: -30px;
+  width: 340px;
+  height: 340px;
   margin-right: auto;
   margin-left: auto;
   background: rgb(255, 255, 255);
@@ -218,19 +218,25 @@
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
-    top: 185px;
+    top: 155px;
+    width: 450px;
+    height: 450px;
   }
 }
 @media (min-width: 36em) {
   .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
     top: 215px;
     left: -50px;
+    width: 550px;
+    height: 550px;
   }
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
     top: 250px;
     left: 0;
+    width: 712.18px;
+    height: 712.18px;
   }
 }
 @media (min-width: 62em) {
@@ -256,6 +262,13 @@
 .duet-hero.duet-hero-section .duet-hero-text duet-paragraph {
   margin: 0 auto;
 }
+@media (min-width: 22.5em) {
+  .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-hero-section .duet-hero-text duet-paragraph {
+    width: 65%;
+  }
+}
 @media (min-width: 36em) {
   .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
   .duet-hero.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section .duet-hero-text .duet-hero-subheading,
@@ -275,16 +288,16 @@
   align-items: center;
   height: 6rem;
   padding: 0 1rem;
-  margin: 1rem 0 4rem;
+  margin: 1rem 0 4.5rem;
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
-    margin: 2rem 0 7rem;
+    margin: 2rem 0 4rem;
   }
 }
 @media (min-width: 36em) {
   .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
-    margin: 3rem 0 9rem;
+    margin: 3rem 0 8rem;
   }
 }
 @media (min-width: 48em) {
@@ -294,26 +307,31 @@
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
-    margin: 5rem 0 11rem;
+    margin: 5rem 0 10rem;
   }
 }
 @media (min-width: 76.25em) {
   .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
-    margin: 6rem 0 13rem;
+    margin: 6rem 0 10rem;
   }
 }
 @media (min-width: 76.25em) {
   .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
-    margin: 8rem 0 13rem;
+    margin: 8rem 0 11rem;
   }
 }
+.duet-hero.duet-hero-campaign .duet-hero-wrapper.fluid, .duet-hero.duet-hero-campaign .duet-hero-wrapper.narrow, .duet-hero.duet-hero-section .duet-hero-wrapper.fluid, .duet-hero.duet-hero-section .duet-hero-wrapper.narrow {
+  padding: 0 16px;
+}
 .duet-hero.duet-hero-campaign.duet-theme-turva, .duet-hero.duet-hero-section.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background: none;
 }
 .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
   top: 115px;
-  left: -125px;
+  left: -10px;
+  width: 350px;
+  height: 350px;
   background: rgb(255, 255, 255);
   transform: none;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
@@ -323,24 +341,30 @@
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-    top: 150px;
-    left: -75px;
+    top: 140px;
+    left: -30px;
+    width: 450px;
+    height: 450px;
   }
 }
 @media (min-width: 36em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
     top: 180px;
     left: 0;
+    width: 550px;
+    height: 550px;
   }
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
     top: 220px;
+    width: 712.18px;
+    height: 712.18px;
   }
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-    top: 210px;
+    top: 230px;
   }
 }
 @media (min-width: 76.25em) {
@@ -353,6 +377,21 @@
     top: 290px;
   }
 }
+@media (min-width: 22.5em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+    margin: 2rem 0 5rem;
+  }
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+    margin: 3rem 0 8rem;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+    margin: 4rem 0 10rem;
+  }
+}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
     margin: 5rem 0 10rem;
@@ -368,10 +407,25 @@
     margin: 8rem 0 13rem;
   }
 }
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-section .background {
+    height: 436px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-section .background {
+    height: 516px;
+  }
+}
+@media (min-width: 106.25em) {
+  .duet-hero.duet-hero-section .background {
+    width: 1536px;
+  }
+}
 .duet-hero.duet-hero-product {
   position: relative;
-  padding: 0;
-  margin: 0 0 48px;
+  padding: 0 0 48px;
+  margin: 0;
   overflow: hidden;
   background: rgb(255, 255, 255);
 }
@@ -724,7 +778,7 @@
   position: absolute;
   right: 0;
   bottom: 50px;
-  left: 7%;
+  left: 30px;
   z-index: 0;
   width: 375px;
   height: 375px;
@@ -735,7 +789,7 @@
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content .background .brand-shaped-image {
-    left: 20%;
+    left: 250px;
     width: 687px;
     height: 687px;
   }
@@ -766,7 +820,7 @@
   position: absolute;
   top: -25px;
   right: 0;
-  left: -75%;
+  left: -300px;
   width: 240px;
   height: 240px;
   margin-right: auto;
@@ -779,8 +833,8 @@
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content .background .brand-shape {
-    top: 70px;
-    left: -40%;
+    top: 80px;
+    left: -400px;
     width: 373px;
     height: 373px;
   }

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

@@ -168,6 +168,10 @@
     height: 72px;
   }
 }
+.duet-icon.duet-icon-shape-brand.rotated {
+  transform: rotate(20deg) scale(0.875);
+  transform-origin: center;
+}
 .duet-icon.duet-icon-shape-brand.duet-theme-turva {
   display: flex;
   align-items: center;
@@ -290,6 +294,9 @@
   height: 24px;
   font-size: 0;
 }
+.duet-icon .duet-icon-svg.rotated {
+  transform: rotate(-20deg) scale(1.14);
+}
 .duet-icon svg {
   width: 100%;
   min-width: 100%;

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

@@ -62,6 +62,7 @@ export class DuetIcon {
       background: getColorByName(this.background, this.theme),
       "border-color": getColorByName(this.outline, this.theme),
     };
+    const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
     return (h(Host, { class: {
         "duet-m-0": this.margin === "none",
         "duet-icon-has-outline": !!this.outline,
@@ -73,9 +74,10 @@ export class DuetIcon {
         "duet-theme-default": this.theme === "default",
         "duet-icon-has-outline": !!this.outline,
         "duet-icon-has-background": !!this.background,
-        [`duet-icon-shape-${this.shape}`]: true,
+        [shapeStyle]: true,
+        rotated: this.shape === "brand-rotated" && this.theme !== "turva",
         "duet-icon-not-responsive": !this.responsive,
-      } }, h("span", { "aria-hidden": "true", class: "duet-icon-svg", innerHTML: this.svgContent }))));
+      } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent }))));
   }
   static get is() { return "duet-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -308,8 +310,8 @@ export class DuetIcon {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"circle\" | \"brand\"",
-          "resolved": "\"brand\" | \"circle\"",
+          "original": "\"circle\" | \"brand\" | \"brand-rotated\"",
+          "resolved": "\"brand\" | \"brand-rotated\" | \"circle\"",
           "references": {}
         },
         "required": false,

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

@@ -312,7 +312,7 @@ export class DuetInput {
         "has-clear": this.clear,
         "has-focus": this.isFocused,
         disabled: this.disabled,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
         "duet-input": true,
         disabled: this.disabled,
         "is-number": this.component === "number",

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

@@ -23,6 +23,10 @@
   display: inline;
 }
 
+:host(.duet-link-block) {
+  display: block;
+}
+
 .duet-link {
   display: inline;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -98,4 +102,27 @@
   height: auto;
   outline: 0;
   opacity: 1;
+}
+
+.block.duet-link {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+  font-weight: 600;
+  color: rgb(0, 41, 77);
+  text-decoration: none;
+}
+.block.duet-link.duet-link-has-icon {
+  grid-template-columns: auto 1fr auto;
+}
+.block.duet-link.none {
+  padding: 0;
+}
+.block .block__chevron-icon {
+  transition: 300ms ease;
+}
+.block:hover .block__chevron-icon {
+  transform: translateX(4px);
 }