@utrecht/component-library-css 1.0.0-alpha.577 → 1.0.0-alpha.579

package/dist/html.css

@@ -844,6 +844,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   max-inline-size: var(--utrecht-form-max-inline-size);
 }
 .utrecht-html legend {
+  break-inside: avoid;
   color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
   font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-form-fieldset-legend-font-size);
@@ -894,6 +895,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   }
 }
 .utrecht-html h1 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -907,6 +909,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html h2 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -920,6 +923,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html h3 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -933,6 +937,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html h4 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -946,6 +951,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html h5 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -959,6 +965,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html h6 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -1380,6 +1387,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html caption {
+  break-inside: avoid;
   color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
   font-size: var(--utrecht-table-caption-font-size);
@@ -1393,6 +1401,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --_utrecht-table-header-cell-vertical-align: bottom;
   --_utrecht-table-header-cell-z-index: 8;
   background-color: var(--utrecht-table-header-background-color);
+  break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
   page-break-inside: avoid;

package/dist/index.css

@@ -41,6 +41,7 @@
  */
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-accordion__section {
+  break-inside: avoid;
   margin-block-end: var(--utrecht-accordion-section-margin-block-end);
   margin-block-start: var(--utrecht-accordion-section-margin-block-start);
 }
@@ -2535,6 +2536,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2021-2022 Gemeente Utrecht
  * Copyright (c) 2021-2022 Frameless B.V.
  */
+/* `@mixin utrecht-data-list--html-dl` is not necessary.
+ * Default styles include only `display` and `margin`, and those properties are configured by default.
+ */
+/* `@mixin utrecht-data-list__item-key--html-dt` is not necessary, `<dt>` has no default styles. */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-data-list {
   /* also set `margin-block` to reset browser styling of <dl> */
   display: block;
@@ -2558,7 +2565,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   min-block-size: calc(var(--utrecht-data-list-item-value-line-height) * 1rem);
 }
 
-.utrecht-data-list__actions--html-dd,
+.utrecht-data-list__actions--html-dd {
+  /* reset browser styling of <dd> */
+  margin-inline-start: 0;
+}
+
 .utrecht-data-list__item-value--html-dd {
   /* reset browser styling of <dd> */
   margin-inline-start: 0;
@@ -2584,11 +2595,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-block-end-color: var(--utrecht-data-list-rows-border-bottom-color, transparent);
   border-block-end-style: solid;
   border-block-end-width: var(--utrecht-data-list-rows-border-bottom-width, 0);
+  column-gap: var(--utrecht-data-list-rows-gap);
   display: grid;
-  gap: 0 var(--utrecht-data-list-rows-gap);
   grid-auto-columns: 1fr;
   grid-template-columns: repeat(auto-fit, var(--_utrecht-auto-col));
   margin-block-start: var(--utrecht-data-list-rows-item-margin-block-start);
+  row-gap: 0;
 }
 .utrecht-data-list--rows .utrecht-data-list__item:first-of-type {
   margin-block-start: 0;
@@ -2735,6 +2747,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  */
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-form-field {
+  break-inside: avoid;
   font-family: var(--utrecht-document-font-family, inherit);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
@@ -2881,6 +2894,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-form-fieldset__legend {
+  break-inside: avoid;
   color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
   font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-form-fieldset-legend-font-size);
@@ -3118,6 +3132,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 .utrecht-heading-1 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -3151,6 +3166,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 .utrecht-heading-2 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -3184,6 +3200,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 .utrecht-heading-3 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -3217,6 +3234,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 .utrecht-heading-4 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -3250,6 +3268,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 .utrecht-heading-5 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -3283,6 +3302,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 .utrecht-heading-6 {
+  break-inside: avoid-column;
   page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
@@ -5695,6 +5715,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-table--html-table > caption,
 .utrecht-table__caption {
+  break-inside: avoid;
   color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
   font-size: var(--utrecht-table-caption-font-size);
@@ -5710,6 +5731,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --_utrecht-table-header-cell-vertical-align: bottom;
   --_utrecht-table-header-cell-z-index: 8;
   background-color: var(--utrecht-table-header-background-color);
+  break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
   page-break-inside: avoid;
@@ -5772,6 +5794,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-table--html-table > tbody > tr,
 .utrecht-table--html-table > tfoot > tr,
 .utrecht-table__row {
+  break-inside: avoid;
   page-break-inside: avoid;
 }
 
@@ -6489,6 +6512,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Copyright (c) 2021 Gemeente Utrecht
  */
 .utrecht-url {
+  break-inside: avoid;
   font-variant-ligatures: none;
   hyphens: none;
   page-break-inside: avoid;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.577",
+  "version": "1.0.0-alpha.579",
   "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",
@@ -26,5 +26,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "7fdaf0f100856ed33b188092dfb8c8c665f09d1f"
+  "gitHead": "3b0b954c3b91410c10c8c02f67ddb8de5fc3e555"
 }