@duetds/components 6.7.0 → 6.8.0

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

@@ -79,7 +79,7 @@ duet-caption:not(:last-of-type) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  background: white;
+  background: rgb(255, 255, 255);
 }
 
 .duet-input-icon {
@@ -91,12 +91,12 @@ duet-caption:not(:last-of-type) {
   height: 20px;
   font-size: 0;
   line-height: normal;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   pointer-events: none;
   transform: translateY(-50%);
 }
 .duet-theme-turva .duet-input-icon {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 
 .duet-input-container {
@@ -114,11 +114,11 @@ duet-caption:not(:last-of-type) {
   right: -24px;
   min-width: 48px;
   min-height: 48px;
-  color: #004d80;
+  color: rgb(0, 77, 128);
 }
 .duet-input-container.has-clear .duet-input-clear-icon button:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
 .duet-input-container.has-clear .duet-input-clear-icon button:active {
   opacity: 0.75;
@@ -141,10 +141,10 @@ duet-caption:not(:last-of-type) {
   right: 24px;
 }
 .duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button {
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 .duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 
 .duet-input {
@@ -163,11 +163,11 @@ duet-caption:not(:last-of-type) {
   font-weight: 400 !important;
   font-variant-numeric: tabular-nums;
   line-height: 1.5 !important;
-  color: #00294d !important;
+  color: rgb(0, 41, 77) !important;
   cursor: initial !important;
-  background: white !important;
+  background: rgb(255, 255, 255) !important;
   background-clip: initial !important;
-  border: 1px solid #909599 !important;
+  border: 1px solid rgb(144, 149, 153) !important;
   border-radius: 4px !important;
   box-shadow: initial !important;
   transition: box-shadow 150ms ease, border 150ms ease !important;
@@ -179,24 +179,24 @@ duet-caption:not(:last-of-type) {
   padding-right: 64px !important;
 }
 .has-error .duet-input {
-  border-color: #de2362 !important;
+  border-color: rgb(222, 35, 98) !important;
 }
 .has-error .duet-input + .duet-input-icon {
-  color: #de2362 !important;
+  color: rgb(222, 35, 98) !important;
 }
 .duet-theme-turva.has-error .duet-input {
-  border-color: #e02a0d !important;
+  border-color: rgb(224, 42, 13) !important;
 }
 .duet-theme-turva.has-error .duet-input + .duet-input-icon {
-  color: #e02a0d !important;
+  color: rgb(224, 42, 13) !important;
 }
 .has-icon .duet-input {
   padding-right: 48px !important;
 }
 .duet-theme-turva .duet-input {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #171c3a !important;
-  border-color: #747475 !important;
+  color: rgb(23, 28, 58) !important;
+  border-color: rgb(116, 116, 117) !important;
 }
 .duet-input::-ms-clear {
   display: none;
@@ -205,92 +205,92 @@ duet-caption:not(:last-of-type) {
   display: none !important;
 }
 .duet-input::-webkit-input-placeholder {
-  color: #657787;
+  color: rgb(101, 119, 135);
   opacity: 1 !important;
   transition: color 300ms ease;
 }
 .duet-theme-turva .duet-input::-webkit-input-placeholder {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-input:focus::-webkit-input-placeholder {
-  color: #cfd2d4;
+  color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
-  color: #cfcfd1;
+  color: rgb(207, 207, 209);
 }
 .duet-input::-moz-placeholder {
-  color: #657787;
+  color: rgb(101, 119, 135);
   opacity: 1 !important;
 }
 .duet-theme-turva .duet-input::-moz-placeholder {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-input:focus::-moz-placeholder {
-  color: #cfd2d4;
+  color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-input:focus::-moz-placeholder {
-  color: #cfcfd1;
+  color: rgb(207, 207, 209);
 }
 .duet-input:-ms-input-placeholder {
-  color: #657787;
+  color: rgb(101, 119, 135);
 }
 .duet-theme-turva .duet-input:-ms-input-placeholder {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-input:focus:-ms-input-placeholder {
-  color: #cfd2d4;
+  color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-input:focus:-ms-input-placeholder {
-  color: #cfcfd1;
+  color: rgb(207, 207, 209);
 }
 .duet-input[disabled] {
-  color: #00294d !important;
+  color: rgb(0, 41, 77) !important;
   cursor: text !important;
-  background: #f5f8fa !important;
-  border-color: #f5f8fa !important;
+  background: rgb(245, 248, 250) !important;
+  border-color: rgb(245, 248, 250) !important;
   box-shadow: none !important;
   opacity: 1 !important;
-  -webkit-text-fill-color: #00294d !important;
+  -webkit-text-fill-color: rgb(0, 41, 77) !important;
 }
 .duet-theme-turva .duet-input[disabled] {
-  color: #171c3a !important;
-  background: #f5f5f7 !important;
-  border-color: #f5f5f7 !important;
-  -webkit-text-fill-color: #171c3a !important;
+  color: rgb(23, 28, 58) !important;
+  background: rgb(245, 245, 247) !important;
+  border-color: rgb(245, 245, 247) !important;
+  -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
 .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599 !important;
+  box-shadow: 0 0 0 1px rgb(144, 149, 153) !important;
 }
 .duet-theme-turva .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475 !important;
+  box-shadow: 0 0 0 1px rgb(116, 116, 117) !important;
 }
 .has-error .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #de2362;
+  box-shadow: 0 0 0 1px rgb(222, 35, 98);
 }
 .duet-theme-turva.has-error .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #e02a0d;
+  box-shadow: 0 0 0 1px rgb(224, 42, 13);
 }
 .duet-input:focus {
-  border-color: #0077b3 !important;
+  border-color: rgb(0, 119, 179) !important;
   outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
+  box-shadow: 0 0 0 1px rgb(0, 119, 179) !important;
   transition: none;
 }
 .duet-theme-turva .duet-input:focus {
-  border-color: #171c3a !important;
-  box-shadow: 0 0 0 1px #171c3a !important;
+  border-color: rgb(23, 28, 58) !important;
+  box-shadow: 0 0 0 1px rgb(23, 28, 58) !important;
 }
 .duet-theme-turva .duet-input:focus + .duet-input-icon {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 .has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px #de2362;
+  box-shadow: 0 0 0 1px rgb(222, 35, 98);
 }
 .duet-theme-turva.has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px #e02a0d;
+  box-shadow: 0 0 0 1px rgb(224, 42, 13);
 }
 .duet-input:focus + .duet-input-icon {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-input[type=search]:not(:placeholder-shown):focus + .duet-input-icon {
   display: none;
@@ -333,7 +333,7 @@ duet-caption:not(:last-of-type) {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #657787;
+  color: rgb(101, 119, 135);
   border-radius: 4px;
 }
 .duet-input-help span {
@@ -342,13 +342,13 @@ duet-caption:not(:last-of-type) {
 }
 .duet-theme-turva .duet-input-help {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .has-error .duet-input-help {
-  color: #de2362;
+  color: rgb(222, 35, 98);
 }
 .duet-theme-turva.has-error .duet-input-help {
-  color: #e02a0d;
+  color: rgb(224, 42, 13);
 }
 
 .duet-label-hidden duet-label {
@@ -405,13 +405,13 @@ duet-caption:not(:last-of-type) {
   align-items: center;
   justify-content: flex-start;
   width: auto;
-  border: 1px solid #909599;
+  border: 1px solid rgb(144, 149, 153);
   border-radius: 4px;
   box-shadow: initial;
   transition: box-shadow 150ms ease, border 150ms ease;
 }
 .duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-input-variation-revealable .duet-input-relative duet-button {
   z-index: 250;
@@ -425,33 +425,33 @@ duet-caption:not(:last-of-type) {
   box-shadow: none !important;
 }
 .duet-input-variation-revealable.disabled .duet-input-relative {
-  background: #f5f8fa;
-  border-color: #e1e3e6;
+  background: rgb(245, 248, 250);
+  border-color: rgb(225, 227, 230);
   box-shadow: none;
 }
 .duet-input-variation-revealable.has-error .duet-input-relative {
-  border-color: #de2362;
+  border-color: rgb(222, 35, 98);
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error .duet-input-relative {
-  border-color: #e02a0d;
+  border-color: rgb(224, 42, 13);
 }
 .duet-input-variation-revealable.has-focus .duet-input-relative {
-  border-color: #0077b3;
-  box-shadow: 0 0 0 1px #0077b3;
+  border-color: rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px rgb(0, 119, 179);
 }
 .duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative {
-  border-color: #171c3a;
-  box-shadow: 0 0 0 1px #171c3a;
+  border-color: rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px rgb(23, 28, 58);
 }
 .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #909599;
+  box-shadow: 0 0 0 1px rgb(144, 149, 153);
 }
 .duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #747475;
+  box-shadow: 0 0 0 1px rgb(116, 116, 117);
 }
 .duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #de2362;
+  box-shadow: 0 0 0 1px rgb(222, 35, 98);
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #e02a0d;
+  box-shadow: 0 0 0 1px rgb(224, 42, 13);
 }

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",
@@ -715,7 +715,8 @@ export class DuetInput {
           "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\"",
           "references": {
             "DuetInputType": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -737,7 +738,8 @@ export class DuetInput {
           "resolved": "\"button\" | \"default\" | \"revealable\"",
           "references": {
             "DuetVariationType": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -916,7 +918,8 @@ export class DuetInput {
           "resolved": "\"date\" | \"input\" | \"number\"",
           "references": {
             "DuetInputComponentType": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -1088,7 +1091,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1107,7 +1111,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1126,7 +1131,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1145,7 +1151,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1164,7 +1171,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }

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

@@ -60,7 +60,7 @@ label {
   font-size: 1rem;
   font-weight: 600 !important;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: left;
   word-break: break-word;
 }
@@ -79,5 +79,5 @@ label span {
 
 :host(.duet-theme-turva) label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }

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

@@ -91,7 +91,8 @@ export class DuetLabel {
           "resolved": "\"auto\" | \"none\" | \"small\"",
           "references": {
             "DuetLabelMargin": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx"
             }
           }
         },
@@ -113,7 +114,8 @@ export class DuetLabel {
           "resolved": "\"medium\" | \"small\"",
           "references": {
             "DuetLabelSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx"
             }
           }
         },

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

@@ -122,7 +122,8 @@ export class DuetLayout {
           "resolved": "\"with-links\" | \"without-links\"",
           "references": {
             "DuetLayoutStickyDistance": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-layout/duet-layout.tsx"
             }
           }
         },

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

@@ -23,33 +23,37 @@
   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";
   font-style: normal;
   font-weight: 400;
-  color: #0077b3;
+  color: rgb(0, 119, 179);
   text-decoration: underline;
   border-radius: 4px;
   transition: 300ms ease;
 }
 .duet-link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 .duet-link.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";
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-link:hover {
-  color: #004d80;
+  color: rgb(0, 77, 128);
   text-decoration: none;
 }
 .duet-link:hover.duet-theme-turva {
-  color: #940925;
+  color: rgb(148, 9, 37);
 }
 .duet-link:active {
   opacity: 0.75;
@@ -74,17 +78,17 @@
   height: 1px;
   overflow: hidden;
   font-weight: 600;
-  color: #0077b3;
+  color: rgb(0, 119, 179);
   text-align: center;
   text-decoration: none;
-  background: white;
+  background: rgb(255, 255, 255);
   border-radius: 4px;
   opacity: 0;
   transition: none;
 }
 .duet-tab-to-link.duet-theme-turva {
   min-width: 120px;
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 @media (min-width: 106.25em) {
   .duet-tab-to-link {
@@ -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);
 }

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

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import chevronIcon from "@duetds/icons/lib/assets/action-arrow-right";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
@@ -11,6 +12,7 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
  */
 export class DuetLink {
   constructor() {
+    this.variation = "default";
     this.accessibleLabel = undefined;
     this.language = getLanguage();
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
@@ -20,6 +22,8 @@ export class DuetLink {
     this.url = "#";
     this.external = false;
     this.tabToLink = false;
+    this.icon = undefined;
+    this.padding = "auto";
   }
   /**
    * Component lifecycle events.
@@ -34,6 +38,12 @@ export class DuetLink {
   async setFocus(options) {
     this.nativeLink.focus(options);
   }
+  renderContent() {
+    return (h(Fragment, null, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
+  }
+  renderGrid() {
+    return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -41,12 +51,18 @@ export class DuetLink {
   render() {
     // Notice that the external icon needs to be places right after the last word of the link.
     // This is why we use &nbps; to keep everything on the same line.
-    return (h(Host, null, h("a", { href: this.url, class: {
+    return (h(Host, { class: {
+        "duet-link-block": this.variation === "block",
+      } }, h("a", { href: this.url, class: {
         "duet-link": true,
         "duet-link-is-external": this.external,
+        "duet-link-has-icon": !!this.icon,
         "duet-tab-to-link": this.tabToLink,
         "duet-theme-turva": this.theme === "turva",
-      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
+        "duet-p-0": this.padding === "none",
+        [this.padding]: true,
+        [this.variation]: true,
+      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
   }
   static get is() { return "duet-link"; }
   static get encapsulation() { return "shadow"; }
@@ -63,6 +79,29 @@ export class DuetLink {
   }
   static get properties() {
     return {
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLinkVariation",
+          "resolved": "\"block\" | \"default\"",
+          "references": {
+            "DuetLinkVariation": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the link."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "accessibleLabel": {
         "type": "string",
         "mutable": false,
@@ -249,6 +288,51 @@ export class DuetLink {
         "attribute": "tab-to-link",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display on the left side of the ink text. (only with variations other than \"default\")"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetPadding",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetPadding": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the padding of the component (only with variations other than \"default\")"
+        },
+        "attribute": "padding",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       }
     };
   }