@duetds/components 6.10.3 → 6.11.0

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"; }
@@ -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"
       }
     };
   }

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

@@ -862,7 +862,7 @@
   }
 }
 .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon {
-  top: 150px;
+  top: 175px;
   background: rgba(198, 12, 48, 0.9);
   -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");
   -webkit-mask-repeat: no-repeat;
@@ -876,6 +876,11 @@
   transform: rotate(0deg);
 }
 @media (min-width: 48em) {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon duet-icon {
+    top: -10px;
+  }
+}
+@media (min-width: 62em) {
   .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon duet-icon {
     top: -15px;
   }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.css

@@ -23,7 +23,7 @@
 }
 
 .duet-popup-menu-list {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   z-index: 950;
@@ -47,4 +47,11 @@
   visibility: visible !important;
   opacity: 1;
   transform: scaleY(1);
+}
+.duet-popup-menu-list.fixed {
+  position: fixed;
+}
+.duet-popup-menu-list.duet-theme-turva {
+  color: rgb(23, 28, 58) !important;
+  background: rgb(245, 245, 247);
 }