@utrecht/component-library-css 8.1.5 → 8.2.0

package/dist/index.css

@@ -2820,6 +2820,617 @@
   display: block;
   max-inline-size: var(--utrecht-form-max-inline-size);
 }
+
+.utrecht-grid {
+  --_utrecht-grid-columns-total: 12;
+  --_utrecht-grid-columns-default: 4;
+  --_utrecht-grid-display: flex;
+  --_utrecht-grid-flex-wrap: wrap;
+  --_utrecht-grid-box-sizing: border-box;
+  --_utrecht-grid-flex: 0 0 auto;
+  align-items: var(--_utrecht-grid-align-items, initial);
+  display: var(--_utrecht-grid-display, flex);
+  flex-direction: var(--_utrecht-grid-flex-direction, row);
+  flex-wrap: var(--_utrecht-grid-flex-wrap, wrap);
+  justify-content: var(--_utrecht-grid-justify-content, initial);
+  container-type: inline-size;
+}
+.utrecht-grid--xs-1 {
+  --_utrecht-columns: 1;
+}
+.utrecht-grid--xs-2 {
+  --_utrecht-columns: 2;
+}
+.utrecht-grid--xs-3 {
+  --_utrecht-columns: 3;
+}
+.utrecht-grid--xs-4 {
+  --_utrecht-columns: 4;
+}
+.utrecht-grid--xs-5 {
+  --_utrecht-columns: 5;
+}
+.utrecht-grid--xs-6 {
+  --_utrecht-columns: 6;
+}
+.utrecht-grid--xs-7 {
+  --_utrecht-columns: 7;
+}
+.utrecht-grid--xs-8 {
+  --_utrecht-columns: 8;
+}
+.utrecht-grid--xs-9 {
+  --_utrecht-columns: 9;
+}
+.utrecht-grid--xs-10 {
+  --_utrecht-columns: 10;
+}
+.utrecht-grid--xs-11 {
+  --_utrecht-columns: 11;
+}
+.utrecht-grid--xs-12 {
+  --_utrecht-columns: 12;
+}
+.utrecht-grid--order-1 {
+  --_utrecht-grid-order: 1;
+}
+.utrecht-grid--order-2 {
+  --_utrecht-grid-order: 2;
+}
+.utrecht-grid--order-3 {
+  --_utrecht-grid-order: 3;
+}
+.utrecht-grid--order-4 {
+  --_utrecht-grid-order: 4;
+}
+.utrecht-grid--order-5 {
+  --_utrecht-grid-order: 5;
+}
+.utrecht-grid--order-6 {
+  --_utrecht-grid-order: 6;
+}
+.utrecht-grid--order-7 {
+  --_utrecht-grid-order: 7;
+}
+.utrecht-grid--order-8 {
+  --_utrecht-grid-order: 8;
+}
+.utrecht-grid--order-9 {
+  --_utrecht-grid-order: 9;
+}
+.utrecht-grid--order-10 {
+  --_utrecht-grid-order: 10;
+}
+.utrecht-grid--order-11 {
+  --_utrecht-grid-order: 11;
+}
+.utrecht-grid--order-12 {
+  --_utrecht-grid-order: 12;
+}
+@media screen and (min-width: 600px) {
+  .utrecht-grid--sm-1 {
+    --_utrecht-columns: 1;
+  }
+  .utrecht-grid--sm-2 {
+    --_utrecht-columns: 2;
+  }
+  .utrecht-grid--sm-3 {
+    --_utrecht-columns: 3;
+  }
+  .utrecht-grid--sm-4 {
+    --_utrecht-columns: 4;
+  }
+  .utrecht-grid--sm-5 {
+    --_utrecht-columns: 5;
+  }
+  .utrecht-grid--sm-6 {
+    --_utrecht-columns: 6;
+  }
+  .utrecht-grid--sm-7 {
+    --_utrecht-columns: 7;
+  }
+  .utrecht-grid--sm-8 {
+    --_utrecht-columns: 8;
+  }
+  .utrecht-grid--sm-9 {
+    --_utrecht-columns: 9;
+  }
+  .utrecht-grid--sm-10 {
+    --_utrecht-columns: 10;
+  }
+  .utrecht-grid--sm-11 {
+    --_utrecht-columns: 11;
+  }
+  .utrecht-grid--sm-12 {
+    --_utrecht-columns: 12;
+  }
+  .utrecht-grid--order-sm-1 {
+    --_utrecht-grid-order: 1;
+  }
+  .utrecht-grid--order-sm-2 {
+    --_utrecht-grid-order: 2;
+  }
+  .utrecht-grid--order-sm-3 {
+    --_utrecht-grid-order: 3;
+  }
+  .utrecht-grid--order-sm-4 {
+    --_utrecht-grid-order: 4;
+  }
+  .utrecht-grid--order-sm-5 {
+    --_utrecht-grid-order: 5;
+  }
+  .utrecht-grid--order-sm-6 {
+    --_utrecht-grid-order: 6;
+  }
+  .utrecht-grid--order-sm-7 {
+    --_utrecht-grid-order: 7;
+  }
+  .utrecht-grid--order-sm-8 {
+    --_utrecht-grid-order: 8;
+  }
+  .utrecht-grid--order-sm-9 {
+    --_utrecht-grid-order: 9;
+  }
+  .utrecht-grid--order-sm-10 {
+    --_utrecht-grid-order: 10;
+  }
+  .utrecht-grid--order-sm-11 {
+    --_utrecht-grid-order: 11;
+  }
+  .utrecht-grid--order-sm-12 {
+    --_utrecht-grid-order: 12;
+  }
+}
+@supports (container-type: inline-size) {
+  @container (min-width: 600px) {
+    .utrecht-grid--sm-1 {
+      --_utrecht-columns: 1;
+    }
+    .utrecht-grid--sm-2 {
+      --_utrecht-columns: 2;
+    }
+    .utrecht-grid--sm-3 {
+      --_utrecht-columns: 3;
+    }
+    .utrecht-grid--sm-4 {
+      --_utrecht-columns: 4;
+    }
+    .utrecht-grid--sm-5 {
+      --_utrecht-columns: 5;
+    }
+    .utrecht-grid--sm-6 {
+      --_utrecht-columns: 6;
+    }
+    .utrecht-grid--sm-7 {
+      --_utrecht-columns: 7;
+    }
+    .utrecht-grid--sm-8 {
+      --_utrecht-columns: 8;
+    }
+    .utrecht-grid--sm-9 {
+      --_utrecht-columns: 9;
+    }
+    .utrecht-grid--sm-10 {
+      --_utrecht-columns: 10;
+    }
+    .utrecht-grid--sm-11 {
+      --_utrecht-columns: 11;
+    }
+    .utrecht-grid--sm-12 {
+      --_utrecht-columns: 12;
+    }
+    .utrecht-grid--order-sm-1 {
+      --_utrecht-grid-order: 1;
+    }
+    .utrecht-grid--order-sm-2 {
+      --_utrecht-grid-order: 2;
+    }
+    .utrecht-grid--order-sm-3 {
+      --_utrecht-grid-order: 3;
+    }
+    .utrecht-grid--order-sm-4 {
+      --_utrecht-grid-order: 4;
+    }
+    .utrecht-grid--order-sm-5 {
+      --_utrecht-grid-order: 5;
+    }
+    .utrecht-grid--order-sm-6 {
+      --_utrecht-grid-order: 6;
+    }
+    .utrecht-grid--order-sm-7 {
+      --_utrecht-grid-order: 7;
+    }
+    .utrecht-grid--order-sm-8 {
+      --_utrecht-grid-order: 8;
+    }
+    .utrecht-grid--order-sm-9 {
+      --_utrecht-grid-order: 9;
+    }
+    .utrecht-grid--order-sm-10 {
+      --_utrecht-grid-order: 10;
+    }
+    .utrecht-grid--order-sm-11 {
+      --_utrecht-grid-order: 11;
+    }
+    .utrecht-grid--order-sm-12 {
+      --_utrecht-grid-order: 12;
+    }
+  }
+}
+@media screen and (min-width: 960px) {
+  .utrecht-grid--md-1 {
+    --_utrecht-columns: 1;
+  }
+  .utrecht-grid--md-2 {
+    --_utrecht-columns: 2;
+  }
+  .utrecht-grid--md-3 {
+    --_utrecht-columns: 3;
+  }
+  .utrecht-grid--md-4 {
+    --_utrecht-columns: 4;
+  }
+  .utrecht-grid--md-5 {
+    --_utrecht-columns: 5;
+  }
+  .utrecht-grid--md-6 {
+    --_utrecht-columns: 6;
+  }
+  .utrecht-grid--md-7 {
+    --_utrecht-columns: 7;
+  }
+  .utrecht-grid--md-8 {
+    --_utrecht-columns: 8;
+  }
+  .utrecht-grid--md-9 {
+    --_utrecht-columns: 9;
+  }
+  .utrecht-grid--md-10 {
+    --_utrecht-columns: 10;
+  }
+  .utrecht-grid--md-11 {
+    --_utrecht-columns: 11;
+  }
+  .utrecht-grid--md-12 {
+    --_utrecht-columns: 12;
+  }
+  .utrecht-grid--order-md-1 {
+    --_utrecht-grid-order: 1;
+  }
+  .utrecht-grid--order-md-2 {
+    --_utrecht-grid-order: 2;
+  }
+  .utrecht-grid--order-md-3 {
+    --_utrecht-grid-order: 3;
+  }
+  .utrecht-grid--order-md-4 {
+    --_utrecht-grid-order: 4;
+  }
+  .utrecht-grid--order-md-5 {
+    --_utrecht-grid-order: 5;
+  }
+  .utrecht-grid--order-md-6 {
+    --_utrecht-grid-order: 6;
+  }
+  .utrecht-grid--order-md-7 {
+    --_utrecht-grid-order: 7;
+  }
+  .utrecht-grid--order-md-8 {
+    --_utrecht-grid-order: 8;
+  }
+  .utrecht-grid--order-md-9 {
+    --_utrecht-grid-order: 9;
+  }
+  .utrecht-grid--order-md-10 {
+    --_utrecht-grid-order: 10;
+  }
+  .utrecht-grid--order-md-11 {
+    --_utrecht-grid-order: 11;
+  }
+  .utrecht-grid--order-md-12 {
+    --_utrecht-grid-order: 12;
+  }
+}
+@supports (container-type: inline-size) {
+  @container (min-width: 960px) {
+    .utrecht-grid--md-1 {
+      --_utrecht-columns: 1;
+    }
+    .utrecht-grid--md-2 {
+      --_utrecht-columns: 2;
+    }
+    .utrecht-grid--md-3 {
+      --_utrecht-columns: 3;
+    }
+    .utrecht-grid--md-4 {
+      --_utrecht-columns: 4;
+    }
+    .utrecht-grid--md-5 {
+      --_utrecht-columns: 5;
+    }
+    .utrecht-grid--md-6 {
+      --_utrecht-columns: 6;
+    }
+    .utrecht-grid--md-7 {
+      --_utrecht-columns: 7;
+    }
+    .utrecht-grid--md-8 {
+      --_utrecht-columns: 8;
+    }
+    .utrecht-grid--md-9 {
+      --_utrecht-columns: 9;
+    }
+    .utrecht-grid--md-10 {
+      --_utrecht-columns: 10;
+    }
+    .utrecht-grid--md-11 {
+      --_utrecht-columns: 11;
+    }
+    .utrecht-grid--md-12 {
+      --_utrecht-columns: 12;
+    }
+    .utrecht-grid--order-md-1 {
+      --_utrecht-grid-order: 1;
+    }
+    .utrecht-grid--order-md-2 {
+      --_utrecht-grid-order: 2;
+    }
+    .utrecht-grid--order-md-3 {
+      --_utrecht-grid-order: 3;
+    }
+    .utrecht-grid--order-md-4 {
+      --_utrecht-grid-order: 4;
+    }
+    .utrecht-grid--order-md-5 {
+      --_utrecht-grid-order: 5;
+    }
+    .utrecht-grid--order-md-6 {
+      --_utrecht-grid-order: 6;
+    }
+    .utrecht-grid--order-md-7 {
+      --_utrecht-grid-order: 7;
+    }
+    .utrecht-grid--order-md-8 {
+      --_utrecht-grid-order: 8;
+    }
+    .utrecht-grid--order-md-9 {
+      --_utrecht-grid-order: 9;
+    }
+    .utrecht-grid--order-md-10 {
+      --_utrecht-grid-order: 10;
+    }
+    .utrecht-grid--order-md-11 {
+      --_utrecht-grid-order: 11;
+    }
+    .utrecht-grid--order-md-12 {
+      --_utrecht-grid-order: 12;
+    }
+  }
+}
+@media screen and (min-width: 1280px) {
+  .utrecht-grid--lg-1 {
+    --_utrecht-columns: 1;
+  }
+  .utrecht-grid--lg-2 {
+    --_utrecht-columns: 2;
+  }
+  .utrecht-grid--lg-3 {
+    --_utrecht-columns: 3;
+  }
+  .utrecht-grid--lg-4 {
+    --_utrecht-columns: 4;
+  }
+  .utrecht-grid--lg-5 {
+    --_utrecht-columns: 5;
+  }
+  .utrecht-grid--lg-6 {
+    --_utrecht-columns: 6;
+  }
+  .utrecht-grid--lg-7 {
+    --_utrecht-columns: 7;
+  }
+  .utrecht-grid--lg-8 {
+    --_utrecht-columns: 8;
+  }
+  .utrecht-grid--lg-9 {
+    --_utrecht-columns: 9;
+  }
+  .utrecht-grid--lg-10 {
+    --_utrecht-columns: 10;
+  }
+  .utrecht-grid--lg-11 {
+    --_utrecht-columns: 11;
+  }
+  .utrecht-grid--lg-12 {
+    --_utrecht-columns: 12;
+  }
+  .utrecht-grid--order-lg-1 {
+    --_utrecht-grid-order: 1;
+  }
+  .utrecht-grid--order-lg-2 {
+    --_utrecht-grid-order: 2;
+  }
+  .utrecht-grid--order-lg-3 {
+    --_utrecht-grid-order: 3;
+  }
+  .utrecht-grid--order-lg-4 {
+    --_utrecht-grid-order: 4;
+  }
+  .utrecht-grid--order-lg-5 {
+    --_utrecht-grid-order: 5;
+  }
+  .utrecht-grid--order-lg-6 {
+    --_utrecht-grid-order: 6;
+  }
+  .utrecht-grid--order-lg-7 {
+    --_utrecht-grid-order: 7;
+  }
+  .utrecht-grid--order-lg-8 {
+    --_utrecht-grid-order: 8;
+  }
+  .utrecht-grid--order-lg-9 {
+    --_utrecht-grid-order: 9;
+  }
+  .utrecht-grid--order-lg-10 {
+    --_utrecht-grid-order: 10;
+  }
+  .utrecht-grid--order-lg-11 {
+    --_utrecht-grid-order: 11;
+  }
+  .utrecht-grid--order-lg-12 {
+    --_utrecht-grid-order: 12;
+  }
+}
+@supports (container-type: inline-size) {
+  @container (min-width: 1280px) {
+    .utrecht-grid--lg-1 {
+      --_utrecht-columns: 1;
+    }
+    .utrecht-grid--lg-2 {
+      --_utrecht-columns: 2;
+    }
+    .utrecht-grid--lg-3 {
+      --_utrecht-columns: 3;
+    }
+    .utrecht-grid--lg-4 {
+      --_utrecht-columns: 4;
+    }
+    .utrecht-grid--lg-5 {
+      --_utrecht-columns: 5;
+    }
+    .utrecht-grid--lg-6 {
+      --_utrecht-columns: 6;
+    }
+    .utrecht-grid--lg-7 {
+      --_utrecht-columns: 7;
+    }
+    .utrecht-grid--lg-8 {
+      --_utrecht-columns: 8;
+    }
+    .utrecht-grid--lg-9 {
+      --_utrecht-columns: 9;
+    }
+    .utrecht-grid--lg-10 {
+      --_utrecht-columns: 10;
+    }
+    .utrecht-grid--lg-11 {
+      --_utrecht-columns: 11;
+    }
+    .utrecht-grid--lg-12 {
+      --_utrecht-columns: 12;
+    }
+    .utrecht-grid--order-lg-1 {
+      --_utrecht-grid-order: 1;
+    }
+    .utrecht-grid--order-lg-2 {
+      --_utrecht-grid-order: 2;
+    }
+    .utrecht-grid--order-lg-3 {
+      --_utrecht-grid-order: 3;
+    }
+    .utrecht-grid--order-lg-4 {
+      --_utrecht-grid-order: 4;
+    }
+    .utrecht-grid--order-lg-5 {
+      --_utrecht-grid-order: 5;
+    }
+    .utrecht-grid--order-lg-6 {
+      --_utrecht-grid-order: 6;
+    }
+    .utrecht-grid--order-lg-7 {
+      --_utrecht-grid-order: 7;
+    }
+    .utrecht-grid--order-lg-8 {
+      --_utrecht-grid-order: 8;
+    }
+    .utrecht-grid--order-lg-9 {
+      --_utrecht-grid-order: 9;
+    }
+    .utrecht-grid--order-lg-10 {
+      --_utrecht-grid-order: 10;
+    }
+    .utrecht-grid--order-lg-11 {
+      --_utrecht-grid-order: 11;
+    }
+    .utrecht-grid--order-lg-12 {
+      --_utrecht-grid-order: 12;
+    }
+  }
+}
+.utrecht-grid--justify-content-flex-start {
+  --_utrecht-grid-justify-content: flex-start;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--justify-content-flex-end {
+  --_utrecht-grid-justify-content: flex-end;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--justify-content-center {
+  --_utrecht-grid-justify-content: center;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--justify-content-space-between {
+  --_utrecht-grid-justify-content: space-between;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--align-items-flex-start {
+  --_utrecht-grid-align-items: flex-start;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--align-items-flex-end {
+  --_utrecht-grid-align-items: flex-end;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--align-items-center {
+  --_utrecht-grid-align-items: center;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--flex-direction-column {
+  --_utrecht-grid-flex-direction: column;
+}
+.utrecht-grid--flex-direction-column-reverse {
+  --_utrecht-grid-flex-direction: column-reverse;
+}
+.utrecht-grid--flex-direction-row {
+  --_utrecht-grid-flex-direction: row;
+}
+.utrecht-grid--flex-direction-row-reverse {
+  --_utrecht-grid-flex-direction: row-reverse;
+}
+.utrecht-grid--spacing-sm {
+  margin-block: calc(-1 * var(--utrecht-grid-spacing-sm, 8px));
+  margin-inline: calc(-1 * var(--utrecht-grid-spacing-sm, 8px));
+}
+.utrecht-grid--spacing-sm .utrecht-grid__cell {
+  padding-block: var(--utrecht-grid-spacing-sm, 8px);
+  padding-inline: var(--utrecht-grid-spacing-sm, 8px);
+}
+.utrecht-grid--spacing-md {
+  margin-block: calc(-1 * var(--utrecht-grid-spacing-md, 16px));
+  margin-inline: calc(-1 * var(--utrecht-grid-spacing-md, 16px));
+}
+.utrecht-grid--spacing-md .utrecht-grid__cell {
+  padding-block: var(--utrecht-grid-spacing-md, 16px);
+  padding-inline: var(--utrecht-grid-spacing-md, 16px);
+}
+.utrecht-grid--spacing-lg {
+  margin-block: calc(-1 * var(--utrecht-grid-spacing-lg, 24px));
+  margin-inline: calc(-1 * var(--utrecht-grid-spacing-lg, 24px));
+}
+.utrecht-grid--spacing-lg .utrecht-grid__cell {
+  padding-block: var(--utrecht-grid-spacing-lg, 24px);
+  padding-inline: var(--utrecht-grid-spacing-lg, 24px);
+}
+
+.utrecht-grid__cell {
+  align-items: var(--_utrecht-grid-align-items, initial);
+  box-sizing: var(--_utrecht-grid-box-sizing, border-box);
+  display: var(--_utrecht-grid-display, block);
+  flex: var(--_utrecht-grid-flex, 0 0 auto);
+  inline-size: calc(var(--_utrecht-columns, var(--_utrecht-grid-columns-default, 4)) / var(--_utrecht-grid-columns-total, 12) * 100%);
+  justify-content: var(--_utrecht-grid-justify-content, initial);
+  order: var(--_utrecht-grid-order, initial);
+}
 .utrecht-heading-1 {
   break-inside: avoid-column;
   page-break-inside: avoid;

package/dist/prince-xml.css

@@ -2722,6 +2722,629 @@
   display: block;
   max-width: var(--utrecht-form-max-inline-size);
 }
+
+.utrecht-grid {
+  --_utrecht-grid-columns-total: 12;
+  --_utrecht-grid-columns-default: 4;
+  --_utrecht-grid-display: flex;
+  --_utrecht-grid-flex-wrap: wrap;
+  --_utrecht-grid-box-sizing: border-box;
+  --_utrecht-grid-flex: 0 0 auto;
+  align-items: var(--_utrecht-grid-align-items, initial);
+  display: var(--_utrecht-grid-display, flex);
+  flex-direction: var(--_utrecht-grid-flex-direction, row);
+  flex-wrap: var(--_utrecht-grid-flex-wrap, wrap);
+  justify-content: var(--_utrecht-grid-justify-content, initial);
+  container-type: inline-size;
+}
+.utrecht-grid--xs-1 {
+  --_utrecht-columns: 1;
+}
+.utrecht-grid--xs-2 {
+  --_utrecht-columns: 2;
+}
+.utrecht-grid--xs-3 {
+  --_utrecht-columns: 3;
+}
+.utrecht-grid--xs-4 {
+  --_utrecht-columns: 4;
+}
+.utrecht-grid--xs-5 {
+  --_utrecht-columns: 5;
+}
+.utrecht-grid--xs-6 {
+  --_utrecht-columns: 6;
+}
+.utrecht-grid--xs-7 {
+  --_utrecht-columns: 7;
+}
+.utrecht-grid--xs-8 {
+  --_utrecht-columns: 8;
+}
+.utrecht-grid--xs-9 {
+  --_utrecht-columns: 9;
+}
+.utrecht-grid--xs-10 {
+  --_utrecht-columns: 10;
+}
+.utrecht-grid--xs-11 {
+  --_utrecht-columns: 11;
+}
+.utrecht-grid--xs-12 {
+  --_utrecht-columns: 12;
+}
+.utrecht-grid--order-1 {
+  --_utrecht-grid-order: 1;
+}
+.utrecht-grid--order-2 {
+  --_utrecht-grid-order: 2;
+}
+.utrecht-grid--order-3 {
+  --_utrecht-grid-order: 3;
+}
+.utrecht-grid--order-4 {
+  --_utrecht-grid-order: 4;
+}
+.utrecht-grid--order-5 {
+  --_utrecht-grid-order: 5;
+}
+.utrecht-grid--order-6 {
+  --_utrecht-grid-order: 6;
+}
+.utrecht-grid--order-7 {
+  --_utrecht-grid-order: 7;
+}
+.utrecht-grid--order-8 {
+  --_utrecht-grid-order: 8;
+}
+.utrecht-grid--order-9 {
+  --_utrecht-grid-order: 9;
+}
+.utrecht-grid--order-10 {
+  --_utrecht-grid-order: 10;
+}
+.utrecht-grid--order-11 {
+  --_utrecht-grid-order: 11;
+}
+.utrecht-grid--order-12 {
+  --_utrecht-grid-order: 12;
+}
+@media screen and (min-width: 600px) {
+  .utrecht-grid--sm-1 {
+    --_utrecht-columns: 1;
+  }
+  .utrecht-grid--sm-2 {
+    --_utrecht-columns: 2;
+  }
+  .utrecht-grid--sm-3 {
+    --_utrecht-columns: 3;
+  }
+  .utrecht-grid--sm-4 {
+    --_utrecht-columns: 4;
+  }
+  .utrecht-grid--sm-5 {
+    --_utrecht-columns: 5;
+  }
+  .utrecht-grid--sm-6 {
+    --_utrecht-columns: 6;
+  }
+  .utrecht-grid--sm-7 {
+    --_utrecht-columns: 7;
+  }
+  .utrecht-grid--sm-8 {
+    --_utrecht-columns: 8;
+  }
+  .utrecht-grid--sm-9 {
+    --_utrecht-columns: 9;
+  }
+  .utrecht-grid--sm-10 {
+    --_utrecht-columns: 10;
+  }
+  .utrecht-grid--sm-11 {
+    --_utrecht-columns: 11;
+  }
+  .utrecht-grid--sm-12 {
+    --_utrecht-columns: 12;
+  }
+  .utrecht-grid--order-sm-1 {
+    --_utrecht-grid-order: 1;
+  }
+  .utrecht-grid--order-sm-2 {
+    --_utrecht-grid-order: 2;
+  }
+  .utrecht-grid--order-sm-3 {
+    --_utrecht-grid-order: 3;
+  }
+  .utrecht-grid--order-sm-4 {
+    --_utrecht-grid-order: 4;
+  }
+  .utrecht-grid--order-sm-5 {
+    --_utrecht-grid-order: 5;
+  }
+  .utrecht-grid--order-sm-6 {
+    --_utrecht-grid-order: 6;
+  }
+  .utrecht-grid--order-sm-7 {
+    --_utrecht-grid-order: 7;
+  }
+  .utrecht-grid--order-sm-8 {
+    --_utrecht-grid-order: 8;
+  }
+  .utrecht-grid--order-sm-9 {
+    --_utrecht-grid-order: 9;
+  }
+  .utrecht-grid--order-sm-10 {
+    --_utrecht-grid-order: 10;
+  }
+  .utrecht-grid--order-sm-11 {
+    --_utrecht-grid-order: 11;
+  }
+  .utrecht-grid--order-sm-12 {
+    --_utrecht-grid-order: 12;
+  }
+}
+@supports (container-type: inline-size) {
+  @container (min-width: 600px) {
+    .utrecht-grid--sm-1 {
+      --_utrecht-columns: 1;
+    }
+    .utrecht-grid--sm-2 {
+      --_utrecht-columns: 2;
+    }
+    .utrecht-grid--sm-3 {
+      --_utrecht-columns: 3;
+    }
+    .utrecht-grid--sm-4 {
+      --_utrecht-columns: 4;
+    }
+    .utrecht-grid--sm-5 {
+      --_utrecht-columns: 5;
+    }
+    .utrecht-grid--sm-6 {
+      --_utrecht-columns: 6;
+    }
+    .utrecht-grid--sm-7 {
+      --_utrecht-columns: 7;
+    }
+    .utrecht-grid--sm-8 {
+      --_utrecht-columns: 8;
+    }
+    .utrecht-grid--sm-9 {
+      --_utrecht-columns: 9;
+    }
+    .utrecht-grid--sm-10 {
+      --_utrecht-columns: 10;
+    }
+    .utrecht-grid--sm-11 {
+      --_utrecht-columns: 11;
+    }
+    .utrecht-grid--sm-12 {
+      --_utrecht-columns: 12;
+    }
+    .utrecht-grid--order-sm-1 {
+      --_utrecht-grid-order: 1;
+    }
+    .utrecht-grid--order-sm-2 {
+      --_utrecht-grid-order: 2;
+    }
+    .utrecht-grid--order-sm-3 {
+      --_utrecht-grid-order: 3;
+    }
+    .utrecht-grid--order-sm-4 {
+      --_utrecht-grid-order: 4;
+    }
+    .utrecht-grid--order-sm-5 {
+      --_utrecht-grid-order: 5;
+    }
+    .utrecht-grid--order-sm-6 {
+      --_utrecht-grid-order: 6;
+    }
+    .utrecht-grid--order-sm-7 {
+      --_utrecht-grid-order: 7;
+    }
+    .utrecht-grid--order-sm-8 {
+      --_utrecht-grid-order: 8;
+    }
+    .utrecht-grid--order-sm-9 {
+      --_utrecht-grid-order: 9;
+    }
+    .utrecht-grid--order-sm-10 {
+      --_utrecht-grid-order: 10;
+    }
+    .utrecht-grid--order-sm-11 {
+      --_utrecht-grid-order: 11;
+    }
+    .utrecht-grid--order-sm-12 {
+      --_utrecht-grid-order: 12;
+    }
+  }
+}
+@media screen and (min-width: 960px) {
+  .utrecht-grid--md-1 {
+    --_utrecht-columns: 1;
+  }
+  .utrecht-grid--md-2 {
+    --_utrecht-columns: 2;
+  }
+  .utrecht-grid--md-3 {
+    --_utrecht-columns: 3;
+  }
+  .utrecht-grid--md-4 {
+    --_utrecht-columns: 4;
+  }
+  .utrecht-grid--md-5 {
+    --_utrecht-columns: 5;
+  }
+  .utrecht-grid--md-6 {
+    --_utrecht-columns: 6;
+  }
+  .utrecht-grid--md-7 {
+    --_utrecht-columns: 7;
+  }
+  .utrecht-grid--md-8 {
+    --_utrecht-columns: 8;
+  }
+  .utrecht-grid--md-9 {
+    --_utrecht-columns: 9;
+  }
+  .utrecht-grid--md-10 {
+    --_utrecht-columns: 10;
+  }
+  .utrecht-grid--md-11 {
+    --_utrecht-columns: 11;
+  }
+  .utrecht-grid--md-12 {
+    --_utrecht-columns: 12;
+  }
+  .utrecht-grid--order-md-1 {
+    --_utrecht-grid-order: 1;
+  }
+  .utrecht-grid--order-md-2 {
+    --_utrecht-grid-order: 2;
+  }
+  .utrecht-grid--order-md-3 {
+    --_utrecht-grid-order: 3;
+  }
+  .utrecht-grid--order-md-4 {
+    --_utrecht-grid-order: 4;
+  }
+  .utrecht-grid--order-md-5 {
+    --_utrecht-grid-order: 5;
+  }
+  .utrecht-grid--order-md-6 {
+    --_utrecht-grid-order: 6;
+  }
+  .utrecht-grid--order-md-7 {
+    --_utrecht-grid-order: 7;
+  }
+  .utrecht-grid--order-md-8 {
+    --_utrecht-grid-order: 8;
+  }
+  .utrecht-grid--order-md-9 {
+    --_utrecht-grid-order: 9;
+  }
+  .utrecht-grid--order-md-10 {
+    --_utrecht-grid-order: 10;
+  }
+  .utrecht-grid--order-md-11 {
+    --_utrecht-grid-order: 11;
+  }
+  .utrecht-grid--order-md-12 {
+    --_utrecht-grid-order: 12;
+  }
+}
+@supports (container-type: inline-size) {
+  @container (min-width: 960px) {
+    .utrecht-grid--md-1 {
+      --_utrecht-columns: 1;
+    }
+    .utrecht-grid--md-2 {
+      --_utrecht-columns: 2;
+    }
+    .utrecht-grid--md-3 {
+      --_utrecht-columns: 3;
+    }
+    .utrecht-grid--md-4 {
+      --_utrecht-columns: 4;
+    }
+    .utrecht-grid--md-5 {
+      --_utrecht-columns: 5;
+    }
+    .utrecht-grid--md-6 {
+      --_utrecht-columns: 6;
+    }
+    .utrecht-grid--md-7 {
+      --_utrecht-columns: 7;
+    }
+    .utrecht-grid--md-8 {
+      --_utrecht-columns: 8;
+    }
+    .utrecht-grid--md-9 {
+      --_utrecht-columns: 9;
+    }
+    .utrecht-grid--md-10 {
+      --_utrecht-columns: 10;
+    }
+    .utrecht-grid--md-11 {
+      --_utrecht-columns: 11;
+    }
+    .utrecht-grid--md-12 {
+      --_utrecht-columns: 12;
+    }
+    .utrecht-grid--order-md-1 {
+      --_utrecht-grid-order: 1;
+    }
+    .utrecht-grid--order-md-2 {
+      --_utrecht-grid-order: 2;
+    }
+    .utrecht-grid--order-md-3 {
+      --_utrecht-grid-order: 3;
+    }
+    .utrecht-grid--order-md-4 {
+      --_utrecht-grid-order: 4;
+    }
+    .utrecht-grid--order-md-5 {
+      --_utrecht-grid-order: 5;
+    }
+    .utrecht-grid--order-md-6 {
+      --_utrecht-grid-order: 6;
+    }
+    .utrecht-grid--order-md-7 {
+      --_utrecht-grid-order: 7;
+    }
+    .utrecht-grid--order-md-8 {
+      --_utrecht-grid-order: 8;
+    }
+    .utrecht-grid--order-md-9 {
+      --_utrecht-grid-order: 9;
+    }
+    .utrecht-grid--order-md-10 {
+      --_utrecht-grid-order: 10;
+    }
+    .utrecht-grid--order-md-11 {
+      --_utrecht-grid-order: 11;
+    }
+    .utrecht-grid--order-md-12 {
+      --_utrecht-grid-order: 12;
+    }
+  }
+}
+@media screen and (min-width: 1280px) {
+  .utrecht-grid--lg-1 {
+    --_utrecht-columns: 1;
+  }
+  .utrecht-grid--lg-2 {
+    --_utrecht-columns: 2;
+  }
+  .utrecht-grid--lg-3 {
+    --_utrecht-columns: 3;
+  }
+  .utrecht-grid--lg-4 {
+    --_utrecht-columns: 4;
+  }
+  .utrecht-grid--lg-5 {
+    --_utrecht-columns: 5;
+  }
+  .utrecht-grid--lg-6 {
+    --_utrecht-columns: 6;
+  }
+  .utrecht-grid--lg-7 {
+    --_utrecht-columns: 7;
+  }
+  .utrecht-grid--lg-8 {
+    --_utrecht-columns: 8;
+  }
+  .utrecht-grid--lg-9 {
+    --_utrecht-columns: 9;
+  }
+  .utrecht-grid--lg-10 {
+    --_utrecht-columns: 10;
+  }
+  .utrecht-grid--lg-11 {
+    --_utrecht-columns: 11;
+  }
+  .utrecht-grid--lg-12 {
+    --_utrecht-columns: 12;
+  }
+  .utrecht-grid--order-lg-1 {
+    --_utrecht-grid-order: 1;
+  }
+  .utrecht-grid--order-lg-2 {
+    --_utrecht-grid-order: 2;
+  }
+  .utrecht-grid--order-lg-3 {
+    --_utrecht-grid-order: 3;
+  }
+  .utrecht-grid--order-lg-4 {
+    --_utrecht-grid-order: 4;
+  }
+  .utrecht-grid--order-lg-5 {
+    --_utrecht-grid-order: 5;
+  }
+  .utrecht-grid--order-lg-6 {
+    --_utrecht-grid-order: 6;
+  }
+  .utrecht-grid--order-lg-7 {
+    --_utrecht-grid-order: 7;
+  }
+  .utrecht-grid--order-lg-8 {
+    --_utrecht-grid-order: 8;
+  }
+  .utrecht-grid--order-lg-9 {
+    --_utrecht-grid-order: 9;
+  }
+  .utrecht-grid--order-lg-10 {
+    --_utrecht-grid-order: 10;
+  }
+  .utrecht-grid--order-lg-11 {
+    --_utrecht-grid-order: 11;
+  }
+  .utrecht-grid--order-lg-12 {
+    --_utrecht-grid-order: 12;
+  }
+}
+@supports (container-type: inline-size) {
+  @container (min-width: 1280px) {
+    .utrecht-grid--lg-1 {
+      --_utrecht-columns: 1;
+    }
+    .utrecht-grid--lg-2 {
+      --_utrecht-columns: 2;
+    }
+    .utrecht-grid--lg-3 {
+      --_utrecht-columns: 3;
+    }
+    .utrecht-grid--lg-4 {
+      --_utrecht-columns: 4;
+    }
+    .utrecht-grid--lg-5 {
+      --_utrecht-columns: 5;
+    }
+    .utrecht-grid--lg-6 {
+      --_utrecht-columns: 6;
+    }
+    .utrecht-grid--lg-7 {
+      --_utrecht-columns: 7;
+    }
+    .utrecht-grid--lg-8 {
+      --_utrecht-columns: 8;
+    }
+    .utrecht-grid--lg-9 {
+      --_utrecht-columns: 9;
+    }
+    .utrecht-grid--lg-10 {
+      --_utrecht-columns: 10;
+    }
+    .utrecht-grid--lg-11 {
+      --_utrecht-columns: 11;
+    }
+    .utrecht-grid--lg-12 {
+      --_utrecht-columns: 12;
+    }
+    .utrecht-grid--order-lg-1 {
+      --_utrecht-grid-order: 1;
+    }
+    .utrecht-grid--order-lg-2 {
+      --_utrecht-grid-order: 2;
+    }
+    .utrecht-grid--order-lg-3 {
+      --_utrecht-grid-order: 3;
+    }
+    .utrecht-grid--order-lg-4 {
+      --_utrecht-grid-order: 4;
+    }
+    .utrecht-grid--order-lg-5 {
+      --_utrecht-grid-order: 5;
+    }
+    .utrecht-grid--order-lg-6 {
+      --_utrecht-grid-order: 6;
+    }
+    .utrecht-grid--order-lg-7 {
+      --_utrecht-grid-order: 7;
+    }
+    .utrecht-grid--order-lg-8 {
+      --_utrecht-grid-order: 8;
+    }
+    .utrecht-grid--order-lg-9 {
+      --_utrecht-grid-order: 9;
+    }
+    .utrecht-grid--order-lg-10 {
+      --_utrecht-grid-order: 10;
+    }
+    .utrecht-grid--order-lg-11 {
+      --_utrecht-grid-order: 11;
+    }
+    .utrecht-grid--order-lg-12 {
+      --_utrecht-grid-order: 12;
+    }
+  }
+}
+.utrecht-grid--justify-content-flex-start {
+  --_utrecht-grid-justify-content: flex-start;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--justify-content-flex-end {
+  --_utrecht-grid-justify-content: flex-end;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--justify-content-center {
+  --_utrecht-grid-justify-content: center;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--justify-content-space-between {
+  --_utrecht-grid-justify-content: space-between;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--align-items-flex-start {
+  --_utrecht-grid-align-items: flex-start;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--align-items-flex-end {
+  --_utrecht-grid-align-items: flex-end;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--align-items-center {
+  --_utrecht-grid-align-items: center;
+  --_utrecht-grid-display: flex;
+}
+.utrecht-grid--flex-direction-column {
+  --_utrecht-grid-flex-direction: column;
+}
+.utrecht-grid--flex-direction-column-reverse {
+  --_utrecht-grid-flex-direction: column-reverse;
+}
+.utrecht-grid--flex-direction-row {
+  --_utrecht-grid-flex-direction: row;
+}
+.utrecht-grid--flex-direction-row-reverse {
+  --_utrecht-grid-flex-direction: row-reverse;
+}
+.utrecht-grid--spacing-sm {
+  margin-top: calc(-1 * var(--utrecht-grid-spacing-sm, 8px));
+  margin-bottom: calc(-1 * var(--utrecht-grid-spacing-sm, 8px));
+  margin-left: calc(-1 * var(--utrecht-grid-spacing-sm, 8px));
+  margin-right: calc(-1 * var(--utrecht-grid-spacing-sm, 8px));
+}
+.utrecht-grid--spacing-sm .utrecht-grid__cell {
+  padding-top: var(--utrecht-grid-spacing-sm, 8px);
+  padding-bottom: var(--utrecht-grid-spacing-sm, 8px);
+  padding-left: var(--utrecht-grid-spacing-sm, 8px);
+  padding-right: var(--utrecht-grid-spacing-sm, 8px);
+}
+.utrecht-grid--spacing-md {
+  margin-top: calc(-1 * var(--utrecht-grid-spacing-md, 16px));
+  margin-bottom: calc(-1 * var(--utrecht-grid-spacing-md, 16px));
+  margin-left: calc(-1 * var(--utrecht-grid-spacing-md, 16px));
+  margin-right: calc(-1 * var(--utrecht-grid-spacing-md, 16px));
+}
+.utrecht-grid--spacing-md .utrecht-grid__cell {
+  padding-top: var(--utrecht-grid-spacing-md, 16px);
+  padding-bottom: var(--utrecht-grid-spacing-md, 16px);
+  padding-left: var(--utrecht-grid-spacing-md, 16px);
+  padding-right: var(--utrecht-grid-spacing-md, 16px);
+}
+.utrecht-grid--spacing-lg {
+  margin-top: calc(-1 * var(--utrecht-grid-spacing-lg, 24px));
+  margin-bottom: calc(-1 * var(--utrecht-grid-spacing-lg, 24px));
+  margin-left: calc(-1 * var(--utrecht-grid-spacing-lg, 24px));
+  margin-right: calc(-1 * var(--utrecht-grid-spacing-lg, 24px));
+}
+.utrecht-grid--spacing-lg .utrecht-grid__cell {
+  padding-top: var(--utrecht-grid-spacing-lg, 24px);
+  padding-bottom: var(--utrecht-grid-spacing-lg, 24px);
+  padding-left: var(--utrecht-grid-spacing-lg, 24px);
+  padding-right: var(--utrecht-grid-spacing-lg, 24px);
+}
+
+.utrecht-grid__cell {
+  align-items: var(--_utrecht-grid-align-items, initial);
+  box-sizing: var(--_utrecht-grid-box-sizing, border-box);
+  display: var(--_utrecht-grid-display, block);
+  flex: var(--_utrecht-grid-flex, 0 0 auto);
+  width: calc(var(--_utrecht-columns, var(--_utrecht-grid-columns-default, 4)) / var(--_utrecht-grid-columns-total, 12) * 100%);
+  justify-content: var(--_utrecht-grid-justify-content, initial);
+  order: var(--_utrecht-grid-order, initial);
+}
 .utrecht-heading-1 {
   break-inside: avoid-column;
   page-break-inside: avoid;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.1.5",
+  "version": "8.2.0",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -22,13 +22,14 @@
   "dependencies": {
     "@utrecht/accordion-css": "3.0.1",
     "@utrecht/action-group-css": "3.0.1",
+    "@utrecht/alert-css": "3.0.1",
     "@utrecht/alert-dialog-css": "2.0.1",
     "@utrecht/alternate-lang-nav-css": "2.0.1",
-    "@utrecht/alert-css": "3.0.1",
     "@utrecht/article-css": "2.0.1",
     "@utrecht/backdrop-css": "2.0.1",
     "@utrecht/badge-counter-css": "2.0.1",
     "@utrecht/badge-list-css": "3.0.1",
+    "@utrecht/badge-status-css": "2.0.1",
     "@utrecht/blockquote-css": "2.0.1",
     "@utrecht/body-css": "2.0.1",
     "@utrecht/breadcrumb-nav-css": "2.0.1",
@@ -39,7 +40,6 @@
     "@utrecht/checkbox-css": "2.0.1",
     "@utrecht/code-block-css": "2.0.1",
     "@utrecht/code-css": "2.0.1",
-    "@utrecht/badge-status-css": "2.0.1",
     "@utrecht/color-sample-css": "2.0.1",
     "@utrecht/column-layout-css": "2.0.1",
     "@utrecht/combobox-css": "2.0.1",
@@ -59,23 +59,24 @@
     "@utrecht/form-field-error-message-css": "2.0.1",
     "@utrecht/form-fieldset-css": "2.0.1",
     "@utrecht/form-label-css": "2.0.1",
+    "@utrecht/form-toggle-css": "2.0.1",
+    "@utrecht/grid-css": "1.0.0",
     "@utrecht/heading-1-css": "2.0.1",
     "@utrecht/heading-2-css": "2.0.1",
     "@utrecht/heading-3-css": "2.0.1",
     "@utrecht/heading-4-css": "2.0.1",
     "@utrecht/heading-5-css": "2.0.1",
-    "@utrecht/form-toggle-css": "2.0.1",
     "@utrecht/heading-6-css": "2.0.1",
     "@utrecht/heading-group-css": "2.0.1",
     "@utrecht/html-content-css": "2.0.1",
     "@utrecht/iban-data-css": "2.0.1",
     "@utrecht/icon-css": "3.0.1",
-    "@utrecht/index-char-nav-css": "2.0.1",
     "@utrecht/img-css": "2.0.1",
+    "@utrecht/index-char-nav-css": "2.0.1",
     "@utrecht/link-button-css": "2.0.1",
     "@utrecht/link-css": "2.0.1",
-    "@utrecht/link-social-css": "2.0.1",
     "@utrecht/link-list-css": "3.0.1",
+    "@utrecht/link-social-css": "2.0.1",
     "@utrecht/list-social-css": "2.0.1",
     "@utrecht/listbox-css": "2.0.1",
     "@utrecht/logo-button-css": "1.4.2",
@@ -88,21 +89,21 @@
     "@utrecht/nav-list-css": "1.3.2",
     "@utrecht/navigation-css": "1.0.1",
     "@utrecht/number-badge-css": "3.0.1",
-    "@utrecht/ordered-list-css": "3.0.1",
     "@utrecht/number-data-css": "2.0.1",
+    "@utrecht/ordered-list-css": "3.0.1",
     "@utrecht/page-body-css": "1.0.1",
     "@utrecht/page-content-css": "2.0.1",
     "@utrecht/page-css": "2.0.1",
     "@utrecht/page-footer-css": "3.0.1",
     "@utrecht/page-header-css": "2.0.1",
+    "@utrecht/page-layout-css": "2.0.1",
     "@utrecht/pagination-css": "2.0.3",
-    "@utrecht/pre-heading-css": "2.0.1",
     "@utrecht/paragraph-css": "3.0.1",
+    "@utrecht/pre-heading-css": "2.0.1",
     "@utrecht/preserve-data-css": "2.0.1",
-    "@utrecht/page-layout-css": "2.0.1",
     "@utrecht/radio-button-css": "2.0.1",
-    "@utrecht/root-css": "2.0.1",
     "@utrecht/rich-text-css": "2.0.1",
+    "@utrecht/root-css": "2.0.1",
     "@utrecht/search-bar-css": "3.0.1",
     "@utrecht/select-css": "2.0.1",
     "@utrecht/separator-css": "2.0.1",
@@ -110,11 +111,11 @@
     "@utrecht/spotlight-section-css": "2.0.1",
     "@utrecht/surface-css": "2.0.1",
     "@utrecht/table-css": "2.0.1",
+    "@utrecht/table-of-contents-css": "1.0.1",
     "@utrecht/textarea-css": "3.0.1",
     "@utrecht/textbox-css": "3.0.1",
-    "@utrecht/table-of-contents-css": "1.0.1",
-    "@utrecht/top-task-link-css": "2.0.1",
     "@utrecht/tooltip-css": "2.0.1",
+    "@utrecht/top-task-link-css": "2.0.1",
     "@utrecht/top-task-nav-css": "1.3.2",
     "@utrecht/unordered-list-css": "2.0.1",
     "@utrecht/url-data-css": "2.0.1",