@duetds/components 6.10.3 → 6.10.4

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

@@ -7,6 +7,9 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+}
+
+:host(.duet-grid-variation-flex) {
   display: flex !important;
   flex-direction: column !important;
   align-items: flex-start !important;
@@ -15,321 +18,462 @@
   max-width: 100%;
   height: auto;
 }
-
-:host(.duet-grid-breakpoint-x-small) {
+:host(.duet-grid-variation-flex).duet-grid-breakpoint-x-small {
   flex-direction: row !important;
 }
-:host(.duet-grid-breakpoint-x-small).duet-grid-row-reverse {
+:host(.duet-grid-variation-flex).duet-grid-breakpoint-x-small.duet-grid-row-reverse {
   flex-direction: row-reverse !important;
 }
 @media (max-width: 22.5em) {
-  :host(.duet-grid-breakpoint-x-small) {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-x-small {
     flex-direction: column !important;
   }
 }
-
 @media (min-width: 36em) {
-  :host(.duet-grid-breakpoint-small) {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-small {
     flex-direction: row !important;
   }
-  :host(.duet-grid-breakpoint-small).duet-grid-row-reverse {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-small.duet-grid-row-reverse {
     flex-direction: row-reverse !important;
   }
 }
-
 @media (min-width: 48em) {
-  :host(.duet-grid-breakpoint-medium) {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-medium {
     flex-direction: row !important;
   }
-  :host(.duet-grid-breakpoint-medium).duet-grid-row-reverse {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-medium.duet-grid-row-reverse {
     flex-direction: row-reverse !important;
   }
 }
-
 @media (min-width: 62em) {
-  :host(.duet-grid-breakpoint-large) {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-large {
     flex-direction: row !important;
   }
-  :host(.duet-grid-breakpoint-large).duet-grid-row-reverse {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-large.duet-grid-row-reverse {
     flex-direction: row-reverse !important;
   }
 }
-
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-breakpoint-x-large) {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-x-large {
     flex-direction: row !important;
   }
-  :host(.duet-grid-breakpoint-x-large).duet-grid-row-reverse {
+  :host(.duet-grid-variation-flex).duet-grid-breakpoint-x-large.duet-grid-row-reverse {
     flex-direction: row-reverse !important;
   }
 }
-
-:host(.duet-grid-wrap) {
+:host(.duet-grid-variation-flex).duet-grid-wrap {
   flex-wrap: wrap !important;
 }
-
-:host(.duet-no-stacking) {
+:host(.duet-grid-variation-flex).duet-no-stacking {
   flex-direction: row !important;
 }
-:host(.duet-no-stacking).duet-grid-row-reverse {
+:host(.duet-grid-variation-flex).duet-no-stacking.duet-grid-row-reverse {
   flex-direction: row-reverse !important;
 }
-
-:host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
+:host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-x-small {
     flex-direction: column !important;
   }
 }
-
-:host(.duet-grid-direction-vertical.duet-grid-breakpoint-small) {
+:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-small {
   flex-direction: column !important;
 }
 @media (min-width: 36em) {
-  :host(.duet-grid-direction-vertical.duet-grid-breakpoint-small) {
+  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-small {
     flex-direction: column !important;
   }
 }
-
-:host(.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {
+:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-medium {
   flex-direction: column !important;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {
+  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-medium {
     flex-direction: column !important;
   }
 }
-
-:host(.duet-grid-direction-vertical.duet-grid-breakpoint-large) {
+:host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-large {
     flex-direction: column !important;
   }
 }
-
-:host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {
+:host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-x-large {
   flex-direction: column !important;
 }
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {
+  :host(.duet-grid-variation-flex).duet-grid-direction-vertical.duet-grid-breakpoint-x-large {
     flex-direction: column !important;
   }
 }
-
-:host(.duet-grid-align-top.duet-no-stacking) {
+:host(.duet-grid-variation-flex).duet-grid-align-top.duet-no-stacking {
   align-items: flex-start !important;
 }
-
-:host(.duet-grid-align-bottom.duet-no-stacking) {
+:host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-no-stacking {
   align-items: flex-end !important;
 }
-
-:host(.duet-grid-align-center.duet-no-stacking) {
+:host(.duet-grid-variation-flex).duet-grid-align-center.duet-no-stacking {
   align-items: center !important;
 }
-
-:host(.duet-grid-align-stretch.duet-no-stacking) {
+:host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-no-stacking {
   align-items: stretch !important;
 }
-
-:host(.duet-grid-align-baseline.duet-no-stacking) {
+:host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-no-stacking {
   align-items: baseline !important;
 }
-
-:host(.duet-grid-align-top.duet-grid-breakpoint-x-small) {
+:host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-x-small {
   align-items: flex-start !important;
 }
-
-:host(.duet-grid-align-bottom.duet-grid-breakpoint-x-small) {
+:host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-x-small {
   align-items: flex-end !important;
 }
-
-:host(.duet-grid-align-center.duet-grid-breakpoint-x-small) {
+:host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-x-small {
   align-items: center !important;
 }
-
-:host(.duet-grid-align-stretch.duet-grid-breakpoint-x-small) {
+:host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-x-small {
   align-items: stretch !important;
 }
-
-:host(.duet-grid-align-baseline.duet-grid-breakpoint-x-small) {
+:host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-small {
     align-items: flex-start !important;
   }
 }
-
 @media (min-width: 36em) {
-  :host(.duet-grid-align-bottom.duet-grid-breakpoint-small) {
+  :host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-small {
     align-items: flex-end !important;
   }
 }
-
 @media (min-width: 36em) {
-  :host(.duet-grid-align-center.duet-grid-breakpoint-small) {
+  :host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-small {
     align-items: center !important;
   }
 }
-
 @media (min-width: 36em) {
-  :host(.duet-grid-align-stretch.duet-grid-breakpoint-small) {
+  :host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-small {
     align-items: stretch !important;
   }
 }
-
 @media (min-width: 36em) {
-  :host(.duet-grid-align-baseline.duet-grid-breakpoint-small) {
+  :host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-small {
     align-items: baseline !important;
   }
 }
-
 @media (min-width: 48em) {
-  :host(.duet-grid-align-top.duet-grid-breakpoint-medium) {
+  :host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-medium {
     align-items: flex-start !important;
   }
 }
-
 @media (min-width: 48em) {
-  :host(.duet-grid-align-bottom.duet-grid-breakpoint-medium) {
+  :host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-medium {
     align-items: flex-end !important;
   }
 }
-
 @media (min-width: 48em) {
-  :host(.duet-grid-align-center.duet-grid-breakpoint-medium) {
+  :host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-medium {
     align-items: center !important;
   }
 }
-
 @media (min-width: 48em) {
-  :host(.duet-grid-align-stretch.duet-grid-breakpoint-medium) {
+  :host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-medium {
     align-items: stretch !important;
   }
 }
-
 @media (min-width: 48em) {
-  :host(.duet-grid-align-baseline.duet-grid-breakpoint-medium) {
+  :host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-medium {
     align-items: baseline !important;
   }
 }
-
 @media (min-width: 62em) {
-  :host(.duet-grid-align-top.duet-grid-breakpoint-large) {
+  :host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).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) {
+  :host(.duet-grid-variation-flex).duet-grid-align-top.duet-grid-breakpoint-x-large {
     align-items: flex-start !important;
   }
 }
-
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-align-bottom.duet-grid-breakpoint-x-large) {
+  :host(.duet-grid-variation-flex).duet-grid-align-bottom.duet-grid-breakpoint-x-large {
     align-items: flex-end !important;
   }
 }
-
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-align-center.duet-grid-breakpoint-x-large) {
+  :host(.duet-grid-variation-flex).duet-grid-align-center.duet-grid-breakpoint-x-large {
     align-items: center !important;
   }
 }
-
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-align-stretch.duet-grid-breakpoint-x-large) {
+  :host(.duet-grid-variation-flex).duet-grid-align-stretch.duet-grid-breakpoint-x-large {
     align-items: stretch !important;
   }
 }
-
 @media (min-width: 64.0625em) {
-  :host(.duet-grid-align-baseline.duet-grid-breakpoint-x-large) {
+  :host(.duet-grid-variation-flex).duet-grid-align-baseline.duet-grid-breakpoint-x-large {
     align-items: baseline !important;
   }
 }
-
-:host(.duet-grid-distribution-left) {
+:host(.duet-grid-variation-flex).duet-grid-distribution-left {
   justify-content: flex-start !important;
 }
-
-:host(.duet-grid-distribution-right) {
+:host(.duet-grid-variation-flex).duet-grid-distribution-right {
   justify-content: flex-end !important;
 }
-
-:host(.duet-grid-distribution-center) {
+:host(.duet-grid-variation-flex).duet-grid-distribution-center {
   justify-content: center !important;
 }
-
-:host(.duet-grid-distribution-between) {
+:host(.duet-grid-variation-flex).duet-grid-distribution-between {
   justify-content: space-between !important;
 }
-
-:host(.duet-grid-distribution-around) {
+:host(.duet-grid-variation-flex).duet-grid-distribution-around {
   justify-content: space-around !important;
 }
-
-:host(.duet-grid-distribution-evenly) {
+:host(.duet-grid-variation-flex).duet-grid-distribution-evenly {
   justify-content: space-evenly !important;
 }
-
 @media (max-width: 35.9375em) {
-  :host(.duet-grid-mobile-left) {
+  :host(.duet-grid-variation-flex).duet-grid-mobile-left {
     align-items: flex-start !important;
     justify-content: flex-start !important;
     text-align: left !important;
   }
 }
-
 @media (max-width: 35.9375em) {
-  :host(.duet-grid-mobile-center) {
+  :host(.duet-grid-variation-flex).duet-grid-mobile-center {
     align-items: center !important;
     justify-content: center !important;
     text-align: center !important;
   }
-  :host(.duet-grid-mobile-center) * {
+  :host(.duet-grid-variation-flex).duet-grid-mobile-center * {
     text-align: center !important;
   }
 }
-
 @media (max-width: 35.9375em) {
-  :host(.duet-grid-mobile-right) {
+  :host(.duet-grid-variation-flex).duet-grid-mobile-right {
     align-items: flex-end !important;
     justify-content: flex-end !important;
     text-align: right !important;
   }
-  :host(.duet-grid-mobile-right) * {
+  :host(.duet-grid-variation-flex).duet-grid-mobile-right * {
     text-align: right !important;
   }
+}
+
+:host(.duet-grid-variation-grid) {
+  display: grid;
+  grid-template-rows: repeat(1, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 20px;
+}
+@media (min-width: 36em) {
+  :host(.duet-grid-variation-grid) {
+    gap: 24px;
+    margin: 0 40px;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid) {
+    grid-template-columns: repeat(8, 55px);
+    gap: 24px 32px;
+    margin: 0 auto;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    margin: 0 64px;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-grid-variation-grid) {
+    grid-template-columns: repeat(12, 55px);
+    gap: 40px;
+    margin: 0 auto;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-small::slotted(*) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-small::slotted(*) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-small::slotted(*) {
+    grid-column: 3/span 8;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-medium::slotted(*) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-medium::slotted(*) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-medium::slotted(*) {
+    grid-column: 2/span 10;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-large::slotted(*) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-large::slotted(*) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-large::slotted(*) {
+    grid-column: 1/span 12;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(1)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(1)) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(1)) {
+    grid-column: 1/span 8;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(2)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(2)) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(2)) {
+    grid-column: 9/span 4;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(1)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(1)) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(1)) {
+    grid-column: 1/span 4;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(2)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(2)) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(2)) {
+    grid-column: 5/span 8;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(1)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(1)) {
+    grid-column: 1/span 4;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(1)) {
+    grid-column: 1/span 6;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(2)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(2)) {
+    grid-column: 5/span 4;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(2)) {
+    grid-column: 7/span 6;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(1)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(1)) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(1)) {
+    grid-column: 1/span 4;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(2)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(2)) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(2)) {
+    grid-column: 5/span 4;
+  }
+}
+:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3)) {
+  grid-column: 1/span 4;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3)) {
+    grid-column: 1/span 8;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3)) {
+    grid-column: 9/span 4;
+  }
 }

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

@@ -22,6 +22,7 @@ export class DuetGrid {
     this.alignment = "top";
     this.distribution = "default";
     this.mobile = "";
+    this.gridTemplate = null;
   }
   /**
    * Private functions
@@ -142,7 +143,9 @@ export class DuetGrid {
         "duet-grid-breakpoint-large": this.breakpoint === "large",
         "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
         "duet-grid-row-reverse": this.rowReverse,
-      } }));
+        [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
+        [`duet-grid-template-${this.gridTemplate}`]: true,
+      } }, h("slot", null)));
   }
   static get is() { return "duet-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -249,7 +252,7 @@ export class DuetGrid {
           "references": {
             "DuetGridAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -272,7 +275,7 @@ export class DuetGrid {
           "references": {
             "DuetGridDistribution": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -295,7 +298,7 @@ export class DuetGrid {
           "references": {
             "DuetGridMobileAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -308,6 +311,24 @@ export class DuetGrid {
         "attribute": "mobile",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "gridTemplate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"medium\" | \"large\" | \"sidebar-right\" | \"sidebar-left\" | \"two-columns\" | \"three-columns\"",
+          "resolved": "\"large\" | \"medium\" | \"sidebar-left\" | \"sidebar-right\" | \"small\" | \"three-columns\" | \"two-columns\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS grid based templates that can be used to create pre-defined layouts."
+        },
+        "attribute": "grid-template",
+        "reflect": false,
+        "defaultValue": "null"
       }
     };
   }