@duetds/components 6.10.2 → 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"; }
@@ -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-number-input/duet-number-input.js

@@ -241,6 +241,13 @@ export class DuetNumberInput {
   async setFocus(options) {
     this.duetInputElement.setFocus(options);
   }
+  /**
+   * Returns a promise which resolves to the current input numeric value.
+   */
+  async getValueAsNumber() {
+    const currentValue = SafeParseFloat(this.value, this.locale);
+    return this.value === undefined || this.value === null || isNaN(currentValue) ? null : currentValue;
+  }
   clearValue() {
     this.value = null;
     this.duetInputElement.value = "";
@@ -1085,6 +1092,22 @@ export class DuetNumberInput {
           "text": "Sets focus on the specified `duet-number-input`. Use this method instead of the global\n`input.focus()`.",
           "tags": []
         }
+      },
+      "getValueAsNumber": {
+        "complexType": {
+          "signature": "() => Promise<number>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<number>"
+        },
+        "docs": {
+          "text": "Returns a promise which resolves to the current input numeric value.",
+          "tags": []
+        }
       }
     };
   }