@utrecht/component-library-css 8.1.4 → 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;