@duetds/components 9.0.2 → 9.1.0

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

@@ -18,270 +18,335 @@
   max-width: 100%;
   height: auto;
 }
-:host(.duet-grid-variation-flex).duet-grid-breakpoint-x-small {
+
+:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {
   flex-direction: row !important;
 }
-: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-variation-flex).duet-grid-breakpoint-x-small {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {
     flex-direction: column !important;
   }
 }
+
+:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse) {
+  flex-direction: row-reverse !important;
+}
+
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-small {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-small) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-small.duet-grid-row-reverse {
+}
+
+@media (min-width: 36em) {
+  :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-variation-flex).duet-grid-breakpoint-medium {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-medium) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-medium.duet-grid-row-reverse {
+}
+
+@media (min-width: 48em) {
+  :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-variation-flex).duet-grid-breakpoint-large {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-large) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-large.duet-grid-row-reverse {
+}
+
+@media (min-width: 62em) {
+  :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-variation-flex).duet-grid-breakpoint-x-large {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large) {
     flex-direction: row !important;
   }
-  :host(.duet-grid-variation-flex).duet-grid-breakpoint-x-large.duet-grid-row-reverse {
+}
+
+@media (min-width: 64.0625em) {
+  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse) {
     flex-direction: row-reverse !important;
   }
 }
-:host(.duet-grid-variation-flex).duet-grid-wrap {
+
+:host(.duet-grid-variation-flex.duet-grid-wrap) {
   flex-wrap: wrap !important;
 }
-:host(.duet-grid-variation-flex).duet-no-stacking {
+
+:host(.duet-grid-variation-flex.duet-no-stacking) {
   flex-direction: row !important;
 }
-:host(.duet-grid-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).duet-grid-align-stretch.duet-no-stacking {
+
+.duet-grid-align-stretch.duet-no-stacking {
   align-items: stretch !important;
 }
-:host(.duet-grid-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).duet-grid-distribution-left {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-left) {
   justify-content: flex-start !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-right {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-right) {
   justify-content: flex-end !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-center {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-center) {
   justify-content: center !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-between {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-between) {
   justify-content: space-between !important;
 }
-:host(.duet-grid-variation-flex).duet-grid-distribution-around {
+
+:host(.duet-grid-variation-flex.duet-grid-distribution-around) {
   justify-content: space-around !important;
 }
-:host(.duet-grid-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).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-variation-flex).duet-grid-mobile-right * {
+  :host(.duet-grid-variation-flex.duet-grid-mobile-right) * {
     text-align: right !important;
   }
 }
@@ -322,163 +387,171 @@
     margin: 0 auto;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-small::slotted(*) {
+
+: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(*) {
+  :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(*) {
+  :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(*) {
+
+: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(*) {
+  :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(*) {
+  :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(*) {
+
+: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(*) {
+  :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(*) {
+  :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(odd)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 8;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(even)) {
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-right::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
     grid-column: 9/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(odd)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(even)) {
+:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-sidebar-left::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
     grid-column: 5/span 8;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(odd)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 4;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(odd)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
     grid-column: 1/span 6;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(even)) {
+:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
     grid-column: 5/span 4;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-two-columns::slotted(:nth-child(even)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
     grid-column: 7/span 6;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+1)) {
+
+:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+1)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+1)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
     grid-column: 1/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+2)) {
+:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+2)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+2)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
     grid-column: 5/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+3)) {
+:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
   grid-column: 1/span 4;
 }
 @media (min-width: 48em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+3)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
     grid-column: 1/span 8;
   }
 }
 @media (min-width: 62em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-three-columns::slotted(:nth-child(3n+3)) {
+  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
     grid-column: 9/span 4;
   }
 }
-:host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+
+:host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 0;
@@ -486,18 +559,18 @@
   /* stylelint-disable */
 }
 @media (min-width: 36em) {
-  :host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     gap: 16px;
   }
 }
 @container (min-width: 664px) {
-  :host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     /* stylelint-enable */
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @container (min-width: 1100px) {
-  :host(.duet-grid-variation-grid).duet-grid-template-button-grid {
+  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     /* stylelint-enable */
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }

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

@@ -88,6 +88,7 @@ export class DuetGrid {
             item.responsive = this.responsive;
             item.breakpoint = this.breakpoint;
             item.direction = this.direction;
+            item.rowReverse = this.rowReverse;
         });
     }
     async updateGridItemsWithInputFields() {
@@ -151,7 +152,7 @@ export class DuetGrid {
             } }, h("slot", null)));
     }
     static get is() { return "duet-grid"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-grid.scss"]
@@ -257,7 +258,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridAlignment": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridAlignment"
                         }
                     }
@@ -281,7 +282,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridDistribution": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridDistribution"
                         }
                     }
@@ -305,7 +306,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridMobileAlignment"
                         }
                     }